Mock 模拟实战项目核心是“真实感+可控性+易切换”，用于前后端分离中快速验证逻辑、保障接口未就绪时前端持续开发、提升联调效率，不替代后端而作为临时占位与协作桥梁。
Mock 模拟实战项目不是为了造轮子，而是为了在前后端分离开发中快速验证逻辑、保障接口未就绪时前端能持续开发、提升联调效率。核心在于“真实感 + 可控性 + 易切换”，不依赖后端服务也能跑通完整业务流。
明确 Mock 的定位和边界
Mock 不是替代后端，而是临时占位与协作桥梁。重点覆盖三类场景：
- 接口尚未开发完成（如新功能模块的 API 还在排期）
- 接口存在不稳定或高延迟（如第三方支付回调、短信发送）
- 需要模拟异常分支（如 401 登录过期、500 服务异常、空列表、分页末页）
避免把 Mock 做成“假后端”——不处理鉴权逻辑、不持久化数据、不模拟复杂事务状态。它只负责返回符合约定格式的响应体。
选择合适的技术方案
根据项目阶段和技术栈选型，常见组合有：
-
开发阶段轻量级：Mock.js + axios 拦截器
在 request 层判断环境变量（如
process.env.NODE_ENV === 'mock'），命中则拦截请求，用 Mock.mock() 生成随机但结构可控的数据。适合 Vue/React 脚手架项目，零服务部署。 -
团队协作标准化：JSON Server 或 YAPI + Mock 规则
用 JSON Server 快速启一个 RESTful 服务；或在 YAPI 中定义接口文档并配置 Mock 返回规则（支持正则、延迟、动态字段），前端直接请求
https://yapi.example.com/mock/123/user/list。 - 工程化集成：vite-plugin-mock / mock-service-worker（MSW） vite-plugin-mock 将 .mock.ts 文件自动注入开发服务器；MSW 更进一步，在浏览器网络层拦截请求，支持真实 HTTP 方法、headers、甚至错误模拟，且不影响生产构建。
设计可维护的 Mock 数据结构
不要写死静态 JSON。用函数或规则让数据具备语义和变化能力：
- 用户列表 mock 可设
total: 100，当前页page: 1，每页pageSize: 10，返回list: Mock.mock({ 'list|10': [...] }) - 登录接口返回
{ code: 200, token: '@string(32)' }，同时设置 localStorage 模拟登录态 - 对「删除」请求，Mock 层可记录被删 ID，后续查询该 ID 时返回 404，增强流程连贯性
关键点：所有字段名、嵌套层级、状态码必须与真实接口文档完全一致，哪怕只是临时 mock。
无缝切换真实接口
Mock 必须能一键关闭。推荐方式：
- 通过环境变量控制（
VUE_APP_MOCK=false或REACT_APP_USE_MOCK=false） - 请求 baseURL 区分：开发时指向
/api（由 devServer 代理到 mock 服务），生产指向https://api.example.com - 在接口请求封装层（如
request.ts）加判断，仅开发环境启用 mock 拦截逻辑，打包后自动剔除
上线前务必做一次「关 mock 跑通全流程」验证，防止遗漏硬编码或路径错位。
不复杂但容易忽略的是数据一致性——比如 mock 的用户 ID 要和详情页、订单页引用的 ID 对得上；时间字段用 @datetime 而非固定字符串，避免测试时序逻辑出错。实战价值，就在这些细节里落地。
