vue-cli webpack模板mock数据的方法

本文保留为归档记录。

这篇文章写于 2017 年，背景是当时的 vue-cli webpack 模板。原方案的核心思路，是直接改开发服务器，在 dev-server.js 里给 Express 增加本地路由，让接口请求返回 mock/ 目录下的 JSON 文件。

这在当时是一个能跑的办法。它解决的是一个很具体的问题：后端接口还没好，前端项目又需要独立跑起来。只要本地能返回约定好的假数据，页面、交互和状态逻辑就可以先往前走。

但今天已经不适合作为主要实践参考。

原因也简单：脚手架、构建工具和团队协作方式都变了。直接修改脚手架生成的开发服务器文件，短期省事，长期容易和工具升级、环境差异、接口变更缠在一起。mock 数据也不应该只是一堆散落的 JSON，它最好和接口契约、错误场景、权限状态、分页筛选、网络失败一起管理。

如果现在重新做，通常会优先考虑几类方案：

1. 使用框架或构建工具提供的 dev server middleware。
2. 用 MSW 这类工具在浏览器或 Node 层拦截请求。
3. 从 OpenAPI、接口文档或后端契约生成 mock。
4. 对关键业务接口补契约测试，避免前后端各说各话。
5. 把 mock 场景纳入本地开发和自动化测试，而不是只服务页面临时预览。

早期方案的价值不在具体代码，而在那个意识：前端工程应该能在后端不完整时独立启动，后来接手的人也应该能快速看到页面跑起来。

这个意识今天仍然成立，只是实现手段该换了。