运行vue项目时，使用vite-plugin-mock的mock数据，后台一直在新增mock文件[vite:mock] mock file add

### vue3项目中使用vite-plugin-mock调试问题及解决方案 #### 插件安装与基础配置 对于vue3+vite项目，在集成`vite-plugin-mock`时，需先通过npm安装必要的依赖包。这包括`mockjs`, `vite-plugin-mock`以及用于发起HTTP请求的库如`axios`[^2]。 ```bash npm i mockjs vite-plugin-mock --save-dev npm i axios ``` 接着，在项目的构建配置文件`vite.config.ts`内引入并配置该插件： ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import viteMockServe from 'vite-plugin-mock' export default defineConfig({ plugins: [ vue(), viteMockServe({ supportTs: false, logger: true, mockPath: "mock", // 设置相对路径到mock文件夹位置 }) ] }) ``` 上述代码展示了如何在Vite配置中启用`vite-plugin-mock`插件，并指定了模拟数据所在的目录为根级别的`mock`文件夹[^4]。 #### 常见错误处理 ##### localEnabled属性未定义导致的报错 当尝试启动开发服务器却遭遇失败，可能是由于`localEnabled`选项缺失所引起的。为了修复这个问题，可以在调用`viteMockServe()`函数时显式指定此参数: ```javascript viteMockServe({ ...otherOptions, localEnabled: true, // 启用本地模式 }) ``` 这样可以确保即使是在生产环境中也能正常加载mock服务[^3]。 ##### 接收到HTML而非JSON格式的数据 如果应用程序接收到的是完整的网页文档而不是预期中的JSON对象，则可能是因为代理设置不当造成的。确认`.env`文件里是否有正确的API前缀声明，并且检查是否正确设置了跨域资源共享(CORS)策略。另外还需验证`baseURL`字段是否指向了正确的端口和服务名。 此外，考虑到VSCode编辑器内部可能出现语法高亮或提示符显示异常的情况——即所谓的“波浪线”，这类现象通常不会影响实际编译过程；但如果确实造成了困扰，可以通过调整IDE内置ESLint规则来消除这些警告信息[^1]。

### 配置开发环境启用 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 。 ---