vue请求封装配合mock.js的核心思路是开发阶段用mock.js拦截真实请求并返回模拟数据，而封装逻辑保持不变，前端按真实接口调用且无感知；mock通过重写xhr/fetch劫持请求，需在开发环境加载、url匹配一致（推荐正则），vite建议用vite-plugin-mock；封装层不感知mock，mock数据须结构对齐后端约定，支持动态响应；mock必须严格限于开发环境，上线前自动移除。
Vue 请求封装配合 Mock.js 的核心思路是：在开发阶段让真实请求被 Mock.js 拦截并返回模拟数据，而请求逻辑本身（如 axios 封装、自定义 Hook）保持不变。这样前端可以按真实接口方式调用，无需感知数据来源是后端还是模拟。
Mock.js 需要正确拦截请求
Mock.js 本质是通过重写 XMLHttpRequest 和 fetch 来劫持浏览器发起的 Ajax 请求。它不关心你用的是 axios 还是 fetch，只要请求发出，就能匹配规则并返回模拟响应。
- 确保 mock 配置在项目启动时加载（如 main.js 或 main.ts 中 import './mock'），且仅在开发环境生效
- URL 匹配需与你封装的请求地址一致。例如封装中写了
axios.get('/api/user')，Mock 就得配置Mock.mock('/api/user', 'get', {...}) - 推荐使用正则表达式匹配，更灵活：
Mock.mock(/\/api\/user/, 'get', {...})，避免路径末尾斜杠差异导致失效 - 若使用 Vite，建议搭配
vite-plugin-mock，它基于服务端中间件拦截，兼容性更好，且天然支持 TypeScript 和 ESM
请求封装保持“零感知”设计
封装层（如自定义 Hook 或 request 工具函数）不需要为 Mock 做任何特殊适配。它只负责发请求、处理 loading/error、统一响应结构 —— Mock 返回的数据只要符合约定格式，就能直接消费。
- 例如你封装了
useApiHook，内部调用axios.get('/api/user')，Mock 返回{ code: 200, data: { name: '张三', age: 28 } }，Hook 解构data后直接交给组件渲染即可 - 错误处理也照常工作：Mock 可返回
{ code: 500, message: '服务器错误' }，你的封装层会触发 catch 分支或 error 状态 - 避免在请求函数里硬编码判断环境来切换 mock/mock 数据源 —— 这会污染业务逻辑，违背“封装应透明”的原则
Mock 数据模板贴近真实接口
Mock 不只是返回随机字符串，关键是结构对齐后端约定。否则封装层解构失败，组件报错，反而拖慢开发。
- 对照接口文档写 Mock 模板，字段名、嵌套层级、类型（string/number/array）必须一致
- 善用 Mock 占位符生成合理值：
'name': '@cname'、'avatar': '@image("100x100", "#f5f5f5", "#fff", "avatar")'、'status|1': ['draft', 'published']' - 对分页列表等复杂结构，用
'list|5-10': [{...}]生成数组，并同步模拟total、page等字段，让封装的分页逻辑能跑通 - 需要动态响应时（如登录校验），可用函数形式：
Mock.mock('/api/login', 'post', (options) => { const { username } = JSON.parse(options.body); return username === 'admin' ? { code: 200, token: 'xxx' } : { code: 401 }; })
环境隔离与上线清理
Mock 必须严格限定在开发阶段，生产构建时自动失效，避免泄露模拟逻辑或影响真实接口。
- Vue CLI 项目：在
main.js中加if (process.env.NODE_ENV === 'development') { require('./mock') } - Vite 项目：通过
vite-plugin-mock的localEnabled和prodEnabled控制，打包时默认关闭 - 检查构建产物是否含 mock 代码：搜索 dist 目录下是否有
mockjs或 mock 文件内容，有则说明未正确隔离 - 团队协作时，在 README 或开发文档中明确标注“Mock 已启用”，避免新人误以为接口已上线
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
