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，省去重复写规则的精力。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 前端调用 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，但作为过渡方案极可靠

大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！