vite-plugin-mock 为 Vite 项目提供本地和生产环境的 Mock 数据服务，支持 TypeScript、热更新和自定义响应延迟。本文讲解其安装配置、Mock 文件编写规范及与前端请求层的集成方式。
pnpm add -D vite-plugin-mock mockjs// vite.config.ts
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig({
plugins: [
vue(),
viteMockServe({
mockPath: 'mock',
enable: true,
}),
],
})mock/
├── user.ts
├── product.ts
└── common.ts// mock/user.ts
import { MockMethod } from 'vite-plugin-mock'
export default [
{
url: '/api/user/list',
method: 'get',
response: ({ query }) => {
return {
code: 200,
message: 'success',
data: [
{ id: 1, name: 'Alice', role: 'admin' },
{ id: 2, name: 'Bob', role: 'user' },
],
}
},
},
{
url: '/api/user/login',
method: 'post',
timeout: 1000, // 模拟延迟
response: ({ body }) => {
if (body.username === 'admin' && body.password === '123456') {
return { code: 200, data: { token: 'mock-token-xxx' } }
}
return { code: 401, message: '用户名或密码错误' }
},
},
] as MockMethod[]import Mock from 'mockjs'
export default [
{
url: '/api/articles',
method: 'get',
response: () => ({
code: 200,
data: Mock.mock({
'list|10-20': [{
'id|+1': 1,
'title': '@ctitle(5, 20)',
'author': '@cname',
'date': '@datetime',
}],
}),
}),
},
]viteMockServe({
mockPath: 'mock',
enable: process.env.NODE_ENV === 'development',
})注：
prodEnabled/injectCode是 v2 的生产 Mock 方案，v3 起已建议改用作者维护的vite-plugin-mock-dev-server。vite-plugin-mock本身已基本停止维护，新项目可优先考虑该替代插件。
viteMockServe({
mockPath: 'mock',
enable: true,
prodEnabled: true, // 生产环境也启用
injectCode: `
import { setupProdMockServer } from './mockProdServer'
setupProdMockServer()
`,
})Mock 拦截的是 HTTP 请求，前端代码无需任何特殊处理：
// api/user.ts
import request from '@/utils/request'
export function getUserList() {
return request.get('/api/user/list')
}
export function login(data: { username: string; password: string }) {
return request.post('/api/user/login', data)
}切换真实接口时，只需关闭 Mock 插件或修改请求 baseURL。
Q: Mock 接口和真实接口如何平滑切换？
通过环境变量控制：开发时用 Mock（VITE_API_BASE=/），联调时切换到真实服务（VITE_API_BASE=http://dev-server:3000）。Mock 文件保留不删除，随时可回退。
Q: 支持 WebSocket Mock 吗？
vite-plugin-mock 不支持 WebSocket。需要 WebSocket Mock 可使用 mock-socket 库。