Mock.js 的关键是“可控生成”与“精准拦截”。需优化模板层（自增规则、格式统一、嵌套校验）、拦截层（正则匹配、动态响应、状态码/响应头）和工程化（模块组织、开关控制、Schema文档）。
一、经典案例高频问题归因
以下四类问题在真实项目中反复出现，本质都指向模板设计或拦截配置的松散性：
-
分页数据 ID 不连续或重复：比如
'id|+1': 1写在数组项内部，导致每条数据都从 1 开始自增，而非全局递增；正确写法应确保自增逻辑作用于整个列表上下文。 -
日期/时间格式与后端不兼容：如用
@datetime生成"2024-03-15 10:30:45"，但后端要求 ISO 格式"2024-03-15T10:30:45Z"，前端解析失败却误判为逻辑 bug。 -
GET 与 POST 拦截混淆：对同一 URL（如
/api/user）既 mock GET 又 mock POST，但未指定 method，Mock.js 默认全部匹配，造成 POST 请求返回只读数据，掩盖表单提交逻辑缺陷。 -
环境未隔离，上线仍生效：Mock 代码直接写在
main.js或组件中，未通过process.env.NODE_ENV === 'development'或独立入口控制，导致打包后仍拦截真实请求，用户看到空白页或错误提示。
二、模板层调优：让数据更“像真的”
数据模板不是越随机越好，而是要贴近业务语义和边界约束。重点优化三处：
-
用好自增与关联规则：ID、序号、状态流转需体现逻辑关系。例如订单列表中，“已支付”订单的
payTime必须早于shipTime，可用函数模板：
'payTime': '@datetime("yyyy-MM-dd HH:mm:ss")',<br> 'shipTime': function() { return this.payTime ? Mock.mock('@datetime("yyyy-MM-dd HH:mm:ss")') : null; } -
统一占位符输出格式：避免混用
@date、@datetime、@now。建议约定项目级格式常量，如定义DATE_FULL = "yyyy-MM-dd HH:mm:ss"，所有时间字段统一调用@datetime(DATE_FULL)。 -
嵌套结构加校验锚点：对含子数组或对象的字段（如商品 SKU 列表），在模板末尾追加
valid校验逻辑，或用toJSONSchema导出 Schema 供前后端对齐，减少“字段存在但值为空”类低级错误。
三、拦截层调优：让请求更“可预期”
拦截不是“全盘接管”，而是有策略地覆盖开发阶段关键路径：
-
URL 匹配优先用正则，慎用字符串：字符串匹配（如
"/api/user"）易误伤，推荐/^\/api\/user(\/\d+)?$/明确限定路径层级与可选 ID 参数。 -
动态响应必须处理 options 全字段：尤其注意
options.type（method）、options.url（含 query）、options.body（POST 数据）。不要忽略options.headers，某些鉴权场景需根据 token 模拟不同权限返回。 -
显式声明响应头与状态码：默认返回 200，但分页接口需
headers: { 'X-Total-Count': '100' }，错误模拟需返回{ code: 401, message: '登录过期' }并设status: 401，否则 Axios 拦截器无法触发对应错误分支。
四、工程化收口：让 Mock 更“可维护”
把 Mock 当作项目配置项来管理，而非临时脚本：
-
按模块组织 mock 文件：如
mock/user/index.js、mock/order/list.js、mock/common/error.js，每个文件导出setup()函数，在统一入口按需加载。 -
支持开关与热切换：提供全局变量（如
window.__MOCK_ENABLED = true）或 URL 参数（?mock=off）实时启停，方便联调时秒切真实接口。 -
生成文档快照：运行
Mock.toJSONSchema(template)输出 JSON Schema，集成进 Swagger 或本地 Markdown，成为接口契约的一部分，而不是藏在代码注释里。
