mock.js核心在于“规则驱动生成”与“请求拦截时机”：数据模板为"name|rule":value结构，rule含义依value类型而定；@占位符调用random生成真实感数据；拦截通过替换xmlhttprequest实现，仅作用于原生xhr。
掌握 Mock.js 的核心，关键不在背语法，而在理解“规则驱动生成”和“请求拦截时机”这两条主线。它不是工具库，而是前端数据契约的落地表达方式。
吃透数据模板定义（DTD）的逻辑
所有模拟数据都来自 "key|rule": value 这一结构，rule 的含义取决于 value 的类型：
-
字符串值：如
'name|3-8': 'a'表示重复 'a' 3–8 次，生成 "aaa" 到 "aaaaaaaa"；'title|5': '@ctitle'表示生成 5 个中文标题 -
数字值：如
'age|18-60': 1生成整数；'score|60-100.2': 1生成保留两位小数的浮点数；'id|+1': 100表示从 100 开始自增 -
布尔值：如
'active|1': true表示真假各占 50%；'isVIP|3-1': false表示 false 占 3/4 概率 -
数组值：如
'list|5-10': [{ id: '@id', name: '@cname' }]生成 5–10 条用户数据，每条结构固定但内容随机 -
对象值：如
'user|2': { name: '@cname', email: '@email' }表示从该对象中随机选 2 个字段返回
熟练使用 @ 占位符生成真实感数据
@ 后面是内置方法名，直接调用 Random 模块，不依赖模板结构，适合填充字段值：
-
@email、@url、@ip—— 基础网络信息 -
@cname、@csentence(5,10)、@cparagraph(2)—— 中文语境友好 -
@date("yyyy-MM-dd")、@time("HH:mm:ss")—— 格式可控的时间 -
@image("200x100", "#333", "测试")—— 直接返回可访问的图片 URL -
@color、@hex、@rgb—— 颜色类字段信手拈来
真正搞懂拦截是怎么生效的
Mock.mock(rurl, template) 或 Mock.mock(rurl, fn) 的本质，是在全局替换 window.XMLHttpRequest 为 MockXMLHttpRequest。它只对原生 XHR 生效，不接管 axios/fetch（除非你额外封装或用 MSW 替代）：
- rurl 支持字符串（全匹配）、正则（如
/^\/api\/user/）、通配符（'/api/user/*'） - 函数形式可读取
options.type（GET/POST）、options.body（POST 数据）、options.url，实现条件响应 - 拦截仅在开发环境启用，上线前务必移除引入或用环境变量控制
结合项目结构形成肌肉记忆
不要零散写 mock，按业务模块组织，例如：
-
mock/user.js：用户相关接口（登录、列表、详情） -
mock/order.js：订单增删改查 + 分页 + 异常状态（401/500） -
mock/index.js：统一入口，按需导入各模块，并调用Mock.setup({ timeout: '200-600' })模拟网络延迟 - 在
main.js或env.development.js中判断process.env.NODE_ENV === 'development'再加载 mock
