Vue开发选Mock工具需按项目阶段和团队需求匹配：单人原型用Mock.js，契约协作选Apifox，测试友好用MSW，离线演示用JSON Server。
Vue 开发中选 Mock 工具，关键不是“哪个最火”，而是看项目阶段、团队规模和协作需求。单人快速验证用轻量方案，多人并行开发就得考虑接口契约与一致性。
小团队或个人原型：Mock.js 最直接
它不依赖服务进程，纯前端拦截 XHR/Fetch，集成快、上手零成本。适合 Vue 项目刚起步、后端接口八字没一撇时快速造数。
- 在
src/mock/index.js里写规则，比如Mock.mock('/api/user', 'get', { id: '@id', name: '@cname' }) - Vite 或 Vue CLI 项目里直接 import，无需额外启动服务
- 支持丰富数据模板（
@image、@date、@integer等），随机性可控 - 注意：没有接口管理界面，契约靠代码维护；上线前必须移除或条件编译，避免污染生产环境
需要接口文档+协作：Apifox 是闭环首选
如果你的团队已有 Swagger 或 OpenAPI 定义，或者正推动 API First 流程，Apifox 能自动从接口定义生成 Smart Mock，省去重复写规则的精力。
- 前端调用
https://mock.apifox.cn/xxx即可，响应结构与真实接口完全一致 - 字段名智能推断（
avatar→ 图片 URL，phone→ 合法手机号），减少手动配置 - 支持在线调试、自动化测试、变更通知，适合中大型项目长期维护
- 缺点是需联网，私有部署需付费；但对重视交付质量的团队，投入产出比高
现代 SPA + 测试友好：MSW 更贴近真实网络
它用 Service Worker 在浏览器层拦截请求，Network 面板显示真实 200 响应，延迟、请求头、CORS 行为都和线上一致——这对单元测试和 E2E 尤其重要。
立即学习“前端免费学习笔记（深入）”；
- 一套 handler 可同时用于开发环境和 Jest/Vitest 测试
- Vue 3 + Pinia 场景下，能精准模拟 loading、error、success 状态流转
- 需单独启动 mock service（
setupServer），但 Vite 插件生态已成熟，配置一次长期可用 - 不适合 IE 或部分禁用 SW 的场景，但 Vue 项目普遍已不兼容旧浏览器
离线/简单 CRUD 演示：JSON Server 最省心
一个 db.json 文件就能跑出完整 REST 接口，连路由都不用写。适合 Vue 组件库示例、教学 demo 或临时后台缺失的内部系统。
- 启动命令：
npx json-server --watch db.json --port 3000 - 自动支持
/users、/users/1、/users?name_like=xx、_page=1&_limit=10等常用查询 - 文件修改实时生效，不用重启；配合 Vue Devtools 查看请求路径非常直观
- 本质是本地 Node 服务，无法替代契约驱动的 Mock，但作为过渡方案极可靠
