推荐使用 vite-plugin-mock 集成 Mock 服务，支持运行时动态注入接口、无需额外服务；配置 localEnabled 开发启用、prodEnabled 生产禁用；mock 文件按规则导出，自动合并；请求路径需完全匹配，支持 RESTful 参数与异步延迟；可手动开关 mock 或结合环境变量灵活控制。
在 Vite 项目中集成 Mock 数据服务，推荐使用 vite-plugin-mock（官方生态常用方案），它支持运行时动态注入 mock 接口，无需启动额外服务，适合本地开发调试。
安装并配置 vite-plugin-mock
安装插件（注意版本兼容性，Vite 5+ 推荐使用 v4.x）：
npm install -D vite-plugin-mock在 vite.config.ts 中添加插件（开发环境启用，生产环境跳过）：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig({
plugins: [
vue(),
viteMockServe({
mockPath: 'src/mock', // mock 文件存放目录
localEnabled: true, // 开发时启用 mock
prodEnabled: false, // 构建时不注入 mock（也可设为 true 并配合 build: { rollupOptions: { external: ['vite-plugin-mock'] } }）
injectCode: `
import { setupMockServer } from 'vite-plugin-mock/client'
setupMockServer()
`,
logger: true,
}),
],
})
编写 Mock 接口文件
在 src/mock/ 下新建文件，如 user.ts，导出数组格式的 mock 规则：
// src/mock/user.ts
export default [
{
url: '/api/users',
method: 'get',
response: () => {
return {
code: 200,
data: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
],
}
},
},
{
url: '/api/users/:id',
method: 'get',
response: ({ params }) => {
return {
code: 200,
data: { id: Number(params.id), name: `用户${params.id}` },
}
},
},
]
- 支持 RESTful 路径参数（如
:id）、查询参数、请求体解析 - 可返回 Promise，支持异步模拟延迟：
response: () => new Promise(resolve => setTimeout(() => resolve({...}), 800)) - 多个文件会自动合并，命名无特殊要求（如
login.ts、order.ts）
前端请求直接调用，无需改 baseURL
保持你原本的请求地址不变（比如用 axios 请求 /api/users），vite-plugin-mock 会在开发服务器中拦截匹配的请求并返回 mock 响应：
// 示例：使用 axios
import axios from 'axios'
axios.get('/api/users').then(res => console.log(res.data))
// ✅ 开发时命中 mock；构建后走真实后端（只要 prodEnabled: false）
- 确保请求路径与 mock 中的
url完全一致（含前缀斜杠） - 跨域问题不存在——因为请求发给的是 Vite Dev Server，由它内部处理转发或拦截
- 浏览器 Network 面板能看到 mock 请求，状态码和响应体都真实呈现
进阶：手动控制 mock 开关或区分环境
可在页面中动态启用/禁用 mock（适合 QA 或联调时快速切换）：
import { enableMock, disableMock } from 'vite-plugin-mock/client'
// 开启 mock
enableMock()
// 关闭 mock，后续请求将透传到真实服务（需已配置代理）
disableMock()
- 结合 Vite 环境变量（
import.meta.env.DEV）或 URL 参数（如?mock=off）灵活控制 - 若同时用了
server.proxy，mock 优先级高于 proxy，想让某路径绕过 mock 可加ignore: true到规则中
