场景模拟

场景模拟允许你为同一 URL 定义多个 mock 响应，并通过场景配置在不同响应间切换，无需修改 mock 文件。

基础用法

为同一接口定义不同场景的 mock。未配置 scene 的 mock 为通用 mock，始终生效。

scene.mock.ts

import { defineMock } from 'vite-plugin-mock-dev-server'

/**
 * Scene mocks.
 *
 * `activeScene: ['test']` is configured in `plugin-options.ts`, so `/api/scene`
 * returns the `test` scene by default. The `X-Mock-Scene` request header overrides
 * the configured scene for a single request.
 *
 * 场景 mock。
 *
 * `plugin-options.ts` 中配置了 `activeScene: ['test']`，因此 `/api/scene`
 * 默认返回 `test` 场景；`X-Mock-Scene` 请求头可以按请求覆盖该配置。
 */
export default defineMock([
  // Universal fallback: always active
  // 通用兜底：始终激活
  {
    url: '/api/scene',
    body: {
      scene: 'universal',
      activeScene: 'none matched',
    },
  },
  {
    url: '/api/scene',
    scene: 'test',
    body: {
      scene: 'test',
      data: { visible: true },
    },
  },
  {
    url: '/api/scene',
    scene: 'demo',
    body: {
      scene: 'demo',
      data: { curated: true },
    },
  },
  {
    url: '/api/scene',
    scene: ['admin', 'demo'],
    body: {
      scene: 'admin or demo',
      data: { privileged: true },
    },
  },
])

插件配置

在 vite.config.ts 中配置激活的场景：

vite.config.ts

import { defineConfig } from 'vite'
import { mockDevServerPlugin } from 'vite-plugin-mock-dev-server'

export default defineConfig({
  plugins: [
    mockDevServerPlugin({
      activeScene: 'test', // 激活 'test' 场景
    }),
  ],
})

当 activeScene 设置为 'test' 时：

• GET /api/scene 无匹配场景 → 返回 { scene: 'default scene' }（通用 mock，无 scene 限制）
• GET /api/scene 场景 'test' 匹配 → 返回 { scene: 'test scene' }（scene 匹配）

当未配置 activeScene（或为空）时：

• GET /api/scene → 返回 { scene: 'default scene' }（仅通用 mock 匹配）

按请求覆盖

使用 X-Mock-Scene 请求头按请求动态切换场景：

// 为本次请求激活 'test' 场景
fetch('/api/scene', {
  headers: { 'X-Mock-Scene': 'test' },
})
// 响应: { scene: 'test scene' }

X-Mock-Scene 请求头支持多个逗号分隔的场景：

fetch('/api/scene', {
  headers: { 'X-Mock-Scene': 'test,dev' },
})