推荐方式是使用 vite-plugin-mock 插件，基于 Mock.js 通过 Connect 中间件拦截请求，具备可调试、热更新及时、与 Vite 生态契合等优势；需安装依赖、配置 vite.config.ts 启用插件并指定 mock 目录，编写符合规范的 mock 文件，保持业务代码零修改，通过 Chrome Network 面板验证响应。
在 Vite 项目中开发阶段模拟后端接口，主流且推荐的方式是使用 vite-plugin-mock 插件。它基于 Mock.js，在本地开发时通过 Connect 中间件拦截请求，不依赖浏览器 XHR/fetch 重写，更稳定、可调试（Chrome Network 面板可见）、热更新及时，且与 Vite 生态天然契合。
安装与基础配置
执行安装命令：
npm install mockjs vite-plugin-mock -D
在 vite.config.ts 中启用插件：
- 设置
mockPath: 'src/mock'指向存放 mock 文件的目录 - 开启
localEnabled: true（开发环境生效） - 关闭
prodEnabled: false（生产环境默认禁用，避免误打包进线上） - 启用
watchFiles: true实现 mock 文件修改后自动刷新响应
编写规范的 mock 文件
在 src/mock/user.ts 等文件中导出数组，每项是一个接口规则对象：
立即学习“Java免费学习笔记（深入）”；
-
url支持字符串或正则，如/^\/api\/user\/\d+$/匹配/api/user/123 -
method指定请求方法，如'get'、'post' -
response可为对象（静态返回），也可为函数（支持解析请求参数、body、query） - 示例：登录接口中从
body解构username和password，校验后返回带token的结构化响应
保持请求逻辑完全不变
你的 axios 封装或 Vue 组合式 API（如 useUserApi）无需任何条件判断或环境分支：
- 照常调用
axios.post('/api/user/login', { username, password }) - mock 返回的数据只要符合后端约定结构（如
{ code: 200, data: { token } }），封装层就能正常解构、处理 loading 和 error - 不要在请求函数里写
if (import.meta.env.DEV) {...}切换数据源 —— 这会污染业务，违背封装透明原则
验证与调试技巧
启动开发服务器后即可验证：
- 打开 Chrome DevTools → Network 标签页，发起请求，观察是否出现对应接口条目（状态码为 200，Type 为 xhr/fetch）
- 点击该请求，查看 Response 内容是否为你 mock 定义的数据
- 修改
src/mock/*.ts文件保存，无需手动刷新页面，新请求将立即使用更新后的逻辑 - 若遇到 404，检查 mock 的
url是否与你代码中请求路径完全一致（注意斜杠、大小写、正则边界）
