vite-plugin-mock安装

### 关于 `vite-plugin-mock` 的安装与使用 #### 安装方式 可以通过 npm 或 yarn 来安装 `vite-plugin-mock` 插件。以下是具体的命令： ```bash npm install vite-plugin-mock --save-dev ``` 或者使用 Yarn 进行安装： ```bash yarn add vite-plugin-mock -D ``` 此操作会将插件作为开发依赖项添加到项目中[^1]。 --- #### 配置步骤 ##### 1. 创建 Mock 文件夹 在项目的 `src` 目录下创建一个名为 `mock` 的文件夹，并在此文件夹内创建对应的 JavaScript 文件。这些文件中的 URL 应该与实际请求的接口地址保持一致。 例如，在 `src/mock/user.js` 中可以定义如下内容： ```javascript export default [ { url: '/api/users', method: 'get', response: () => { return { code: 200, data: [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }], }; }, }, ]; ``` --- ##### 2. 修改 Vite 配置文件 在项目的根目录下的 `vite.config.js` 文件中引入并配置 `vite-plugin-mock` 插件。以下是一个典型的配置示例： ```javascript 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 文件所在的路径，默认为 src/mock localEnabled: true, // 开启本地 mock 功能 supportTs: false, // 是否支持 TypeScript logger: false, // 是否打印日志 }), ], }); ``` 上述配置指定了 `mockPath` 路径为相对于项目根目录的 `mock` 文件夹位置，而非默认的 `src/mock`[^3]。 --- ##### 3. 启用 Mock 功能 为了确保 Mock 数据能够正常工作，可以在开发环境中启用它。通常情况下，只需按照上一步骤正确配置即可自动生效。如果需要手动控制，则可通过环境变量实现： ```javascript // 在 vite.config.js 中动态判断是否启用 Mock const isProd = process.env.NODE_ENV === 'production'; export default defineConfig({ plugins: [ !isProd && viteMockServe({ mockPath: 'mock', localEnabled: true, }), ].filter(Boolean), }); ``` 这样做的好处是在生产环境下不会加载 Mock 数据[^4]。 --- #### 测试 Mock 接口 启动开发服务器后，通过 Axios 请求相应的接口地址，应该能接收到预设的数据响应。例如，访问 `/api/users` 将返回之前定义好的用户列表数据。 --- ### 总结 以上介绍了 `vite-plugin-mock` 的安装、基本配置以及测试流程。通过合理配置和编写 Mock 数据，开发者能够在后端接口尚未完成的情况下提前验证前端功能逻辑。 ---