配置dev启动才使用mockjs vite-plugin-mock，sys不使用mockjs vite-plugin-mock

### 配置开发环境启用 mockjs 和 vite-plugin-mock 在 Vite 项目中，可以通过 `vite.config.js` 文件配置 mock 数据的启用条件，确保 mock 数据仅在开发环境下启用，而在生产环境下不启用。具体实现如下： 在 `vite.config.js` 中，通过 `viteMockServe` 插件的 `localEnabled` 和 `prodEnabled` 参数控制 mock 数据的启用状态。将 `localEnabled` 设置为 `true`，表示在开发环境下启用 mock 数据；将 `prodEnabled` 设置为 `false`，表示在生产环境下不启用 mock 数据。 ```js import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import { viteMockServe } from 'vite-plugin-mock'; export default defineConfig({ plugins: [ vue(), viteMockServe({ mockPath: './mock/', // mock 文件地址 localEnabled: true, // 开发环境下启用 mock prodEnabled: false, // 生产环境下禁用 mock injectCode: ` import { setupProdMockServer } from './mockProdServer'; setupProdMockServer(); `, logger: false, // 是否在控制台显示请求日志 supportTs: false, // 是否支持读取 ts 文件模块 }), ], }); ``` 上述配置中，`localEnabled` 控制开发环境是否启用 mock 数据，`prodEnabled` 控制生产环境是否启用 mock 数据。通过将 `prodEnabled` 设置为 `false`，可以确保在生产构建时不会将 mock 数据打包进最终的产物中 [^1]。 ### mock 数据服务的配置 在项目中，可以通过 `mockProdServer.ts` 文件统一加载所有 mock 数据模块。该文件会自动扫描 `mock` 目录下的所有 `.ts` 文件，并将它们作为 mock 数据源。 ```ts import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'; const modules: Record<string, any> = import.meta.glob('../mock/**/*.ts', { eager: true }); const mockModules: any = []; Object.keys(modules).forEach((key) => { if (key.includes('/_')) { return; } if (modules[key].default) { mockModules.push(...modules[key].default); } }); export function setupProdMockServer() { createProdMockServer(mockModules); } ``` 此文件的作用是创建一个 mock 服务，并加载所有定义好的 mock 接口规则 [^1]。 ### mock 数据文件的结构 每个 mock 文件可以导出一个默认数组，包含一组模拟接口规则。例如，在 `mock/system/user.ts` 中定义用户相关的 mock 接口： ```ts export default [ { url: '/api/user/list', method: 'get', response: () => { return { code: 200, data: [ { id: 1, name: '用户1', age: 25 }, { id: 2, name: '用户2', age: 30 }, ], }; }, }, ]; ``` ### 构建时自动排除 mock 数据 在生产构建时，Vite 会自动排除未被引用的模块。由于 mock 数据仅在开发环境下引入，因此在构建生产版本时，这些 mock 数据不会被打包进最终的产物中 [^1]。 ### 测试与验证 在开发环境中启动项目时，可以通过浏览器开发者工具查看网络请求是否命中 mock 接口；在生产环境中部署后，这些 mock 接口将不会生效，系统将访问真实的后端 API 。 ---