Front-End SolutionsAppearance
Mock 解决方案
市面上所有的 Mock 方案
后端方案
由
Swagger或它的衍生产品提供的后端 Mock 方案由 API 后端管理系统提供的后端 Mock 方案
前端方案
Mockjs提供的无服务的前端 Mock 方案Jest为代表的单元测试框架提供的 Mock 功能vue-element-admin提供的基于webpack的devServer的 Mock Server 方案JSON Server为代表的独立服务的前端 Mock 方案Mock Service Worker为代表的利用 Service Worker 拦截真实请求的前端 Mock 方案
为什么不建议用后端解决方案
因为 Mock 是前端的需求，而不是后端的需求，也就是说只有前端工程师在意，后端工程师是不在意的。基于这个前提，对比如下：
| 前端 Mock 方案 | 后端 Mock 方案 | |
|---|---|---|
| 语言 | Node.js | 后端语言 |
| 物理服务器 | 本机做服务器或无需服务器 | 需要找后端同事部署 |
| 方案微调 | 容易 | 繁琐 |
| 开发、调试 | 便捷 | 繁琐 |
后端方案优势在于联合测试，毕竟数据库统一保存数据便于问题复现，不过测试阶段通常使用测试环境和从生产环境导入的测试数据，已经和 Mock 方案无关。
为什么否掉 Jest 方案
这个方案不是专门的 Mock 解决方案，显得臃肿，如果你从不做单元测试，那么不建议用Jest作为Mock解决方案。如果你用单元测试，那么Jest支持 Mock，你应当直接选择Jest。
剩下的 3 个前端方案的对比
所谓对比，是基于我对 3 个方案的优化之后的效果对比，而不是它们自身能力的对比。另外，由于我觉得“Mock Data 支持增删改永久化储存”不太重要，实现起来过于繁琐，所以没有给Mock Server和Mock Service Worker实现这个需求。
| Mock Server | JSON Server | Mock Service Worker | |
|---|---|---|---|
| 原理 | webpack devServer 拦截请求 | 独立 Node.js 服务器 | Service Worker 拦截请求 |
| 入侵 vue.config.js | 一行代码 | 配置devServer.proxy | 不入侵 |
| 入侵 main.js | if语句 | if语句 | if语句 |
| 额外命令行进程 | 不需要 | 需要 | 不需要 |
| 支持随项目启动 | 支持 | 因为是独立的服务，所以无法随项目启动 | 支持 |
| Mock Data 支持增删改永久化储存 | 不支持，另想办法可以支持 | 支持 | 不支持，另想办法可以支持 |
| 支持生产环境 Mock | 支持，但开发者工具看不到请求 | 支持，但要使用公共服务器另外运行一套 JSON Server，较繁琐 | 支持，但要使用 https: 协议且证书合法 |
优势总结
Mock Server
随项目自启动，没有额外进程。
与 webpack 集成，如果你喜欢 webpack 的话，这就算是它的优势。
JSON Server
- Mock Data 支持增删改永久化储存。
Mock Service Worker
随项目自启动，没有额外进程。
使用 Service Worker 技术，如果你喜欢这个技术，这就算是它的优势。