背景
近期构建一个工程,前端采用了vite构建,配置mock模拟数据时,发现当mock数据发生改变时,就出现了大量的.mjs/.cjs多余文件,还会导致工程运行卡死!
code回现
- 安装了 mockjs、vite-plugin-mock 插件进行配置
- 在vite.config.js中进行配置如下:
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig({
plugins: [
// mock配置
viteMockServe({
mockPath: './mock', //路径
supportTs: false,
logger: false,
localEnable: true
}
],
})
然后当修改mock中的文件时就会出现大量的.mjs或者.cjs文件…
解决方案
1.降低 vite-plugin-mock 插件版本至 2.8.0
npm i vite-plugin-mock@2.8.0 --save-dev
2.修改vite.config.js中 关于viteMockServe的配置
// mock配置
viteMockServe({
mockPath: './mock', //路径
supportTs: false,
logger: false,
localEnable: true,
// 代码注入的文件
injectCode: `
import { setupMockServer } from './mock/mockServer.js';
setupMockServer();
`,
}),
3.根目录下新建mock文件夹,下面新建 mockServer.js 和 modules文件夹
mockServer.js文件:
//重要:若安装vite-plugin-mock最新版本会引入错误,因为安装包内不存在es文件夹;我这里安装的是@2.8.0 版本
import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
import userMock from './modules/user.js'
import pageMock from './modules/page.js'
export const mockModules = [...userMock, ...pageMock]
export function setupMockServer() {
createProdMockServer(mockModules)
}
可以在modules中分模块配置模拟数据
4. axios中进行配置,然后在对应的.vue组件中调用就可以啦。