mock使用 vite-plugin-mock-dev-server

### 使用 `vite-plugin-mock-dev-server` 插件设置 Mock 数据 #### 安装依赖 为了在项目中使用 `vite-plugin-mock-dev-server`，需要先安装该插件及相关依赖。可以通过 npm 或 yarn 进行安装： ```bash npm install vite-plugin-mock-dev-server --save-dev ``` 或者 ```bash yarn add vite-plugin-mock-dev-server --dev ``` --- #### 配置 `vite.config.js` 在项目的 `vite.config.js` 文件中引入并配置 `vite-plugin-mock-dev-server` 插件。 以下是完整的配置示例： ```javascript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; // Vue 插件支持 import mockDevServer from 'vite-plugin-mock-dev-server'; export default defineConfig({ plugins: [ vue(), mockDevServer({ localEnabled: true, // 开启本地 Mock 功能，默认为 true prodEnabled: false, // 是否在生产环境中启用 Mock 默认为 false supportTs: false, // 如果项目中有 TypeScript 支持，则设为 true logger: true, // 是否打印日志信息 mockPath: 'mock', // 设置 Mock 文件所在的路径，默认相对于项目根目录 watchFiles: true, // 自动监听 Mock 文件的变化 }), ], }); ``` 在此配置中： - **localEnabled**: 控制是否在开发模式下启用 Mock 功能[^2]。 - **prodEnabled**: 控制是否在生产环境下也启用 Mock 功能[^3]。 - **supportTs**: 当项目涉及 TypeScript 时需将其设置为 `true`[^3]。 - **logger**: 启用后会在控制台输出 Mock 的相关日志信息[^4]。 - **mockPath**: 指定存放 Mock 脚本的文件夹位置[^3]。 - **watchFiles**: 实现自动检测 Mock 文件变化的功能。 --- #### 创建 Mock 数据文件 创建一个名为 `mock` 的文件夹（可根据实际需求调整名称），并将所有的 Mock 数据脚本存放在其中。例如，在 `mock/user.js` 中编写如下代码： ```javascript // mock/user.js export default { get('/api/users'): (req, res) => { return res.json([ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, ]); }, post('/api/login'): (req, res) => { const body = req.body; if (body.username === 'admin' && body.password === 'password') { return res.status(200).json({ token: 'fake-jwt-token' }); } return res.status(401).json({ message: 'Invalid credentials' }); }, }; ``` 此文件定义了两个接口 `/api/users` 和 `/api/login` 的响应逻辑。对于 GET 请求会返回用户列表；POST 登录请求则验证用户名密码，并返回相应的状态码和消息。 --- #### 测试 Mock 接口 启动 Vite 开发服务器后，访问这些 API 将触发对应的 Mock 响应。例如，发送以下 Axios 请求即可获取模拟的数据： ```javascript import axios from 'axios'; async function fetchUsers() { try { const response = await axios.get('http://localhost:3000/api/users'); console.log(response.data); } catch (error) { console.error(error); } } fetchUsers(); ``` 如果一切正常运行，终端应该显示类似下面的日志输出（取决于是否开启了 `logger` 参数）： ``` [vite-plugin-mock-dev-server] Request received: GET /api/users [vite-plugin-mock-dev-server] Response sent with status code 200 and data [{"id":1,"name":"Alice"},{"id":2,"name":"Bob"}] ``` --- #### 生产环境注意事项 默认情况下，Mock 功能仅限于开发阶段生效。若希望在特定场景下保留 Mock 行为（如演示或测试用途），可将 `prodEnabled` 设为 `true` 并重新构建应用。 ---