Vite插件Mock配置实践：构建高效率开发环境
针对前后端分离开发场景下的接口联调难题，本文详解vite-plugin-mock插件的配置方法。该工具通过双环境适配机制，实现开发阶段的接口模拟与生产环境的数据隔离。
核心配置方案
基础环境需满足Node.js 18+及Vite 5+版本要求。安装依赖时建议采用以下方式：
npm install mockjs --save
npm install vite-plugin-mock --save-dev典型配置示例如下：
import { defineConfig } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig({
plugins: [
viteMockServe({
mockDir: 'src/mock',
isMockEnabled: process.env.NODE_ENV !== 'production',
watchFiles: true,
logger: true
})
]
})高级配置参数
关键配置项说明：
- mockDir：指定模拟数据存储目录，默认值为'mock'
- isMockEnabled：通过环境变量控制功能开关
- watchFiles：启用文件变更自动重载功能
动态接口模拟示例
创建mock/user.ts文件定义接口：
import { MockMethod } from 'vite-plugin-mock'
export default [
{
url: '/api/users',
method: 'get',
timeout: 1000,
response: () => ({
code: 0,
data: [
{ id: 1, name: '张三', age: 25 },
{ id: 2, name: '李四', age: 30 }
],
message: 'success'
})
},
{
url: '/api/users/:id',
method: 'get',
response: ({ query }) => ({
code: 0,
data: {
id: query.id,
name: '王五',
email: 'wangwu@example.com'
}
})
}
] as MockMethod[]支持动态参数处理示例：
{
url: '/api/users',
method: 'post',
response: ({ body }) => ({
code: 0,
data: {
id: Date.now(),
...body
}
})
}生产环境适配方案
创建mockProdServer.ts文件：
import { createProdMockServer } from 'vite-plugin-mock/client'
// 导入模块
import userModule from './mock/user'
import roleModule from './mock/role'
export function setupProdMockServer() {
createProdMockServer([...userModule, ...roleModule])
}入口文件调用示例：
import { createApp } from 'vue'
import { setupProdMockServer } from './mockProdServer'
const app = createApp(App)
if (process.env.NODE_ENV === 'production' &&
process.env.VITE_MOCK_ENABLE === 'true') {
setupProdMockServer()
}
app.mount('#app')优化策略
推荐配置方案：
- 启用文件监听：设置watchFiles为true
- 开启日志输出：设置logger为true
- 按需加载：通过环境变量控制mock功能
- 性能优化：合理设置timeout参数，按模块拆分mock文件
常见问题排查要点：
- Mock数据失效：检查isMockEnabled配置
- 构建失败：确保mock文件不含Node.js模块
- 更新不生效：确认watchFiles设置及路径正确性
