「Vite」基于vite配置mock，优化出现大量.mjs/.cjs文件的方案

背景

近期构建一个工程，前端采用了vite构建，配置mock模拟数据时，发现当mock数据发生改变时，就出现了大量的.mjs/.cjs多余文件，还会导致工程运行卡死！

code回现

1. 安装了 mockjs、vite-plugin-mock 插件进行配置
2. 在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组件中调用就可以啦。