mirage怎么用：我的实测笔记
mirage怎么用，别先啃一堆概念。我把它当成前端本地假后端用了两周，最顺手的地方是接口、数据、延迟都能自己控；最容易卡住的是路由命名和返回结构。下面按我实际搭项目的顺序说。
一句话结论：先 mock，再替换真接口
我用的 Mirage 指的是 Mirage JS，前端开发里拿来模拟后端 API。它不是抓包工具，也不是接口文档工具，更像一个跑在浏览器里的“临时后端”。如果后端接口还没好，或者你想复现空列表、报错、慢网络这些场景，它很合适。
我的使用习惯是：开发初期用 Mirage 把列表、详情、登录状态先跑起来；联调时逐个接口关掉 mock，换成真实 API。这样页面不会卡在“等后端”上，产品验收也能早点看到真实交互。
安装和入口：别把它塞进业务组件
安装通常就是 npm install miragejs 或 yarn add miragejs。关键不在安装，而在放哪儿。我踩过一次坑，把 createServer 写进了某个页面组件，结果热更新后服务反复创建，接口返回变得很怪。
更稳的做法是单独建一个 server.js，比如 src/mirage/server.js，里面导出 makeServer。然后只在开发环境入口调用一次：if (process.env.NODE_ENV === 'development') makeServer()。这样项目结构清楚，也不容易污染生产包。
路由怎么写：路径要贴近真实后端
最简单的写法是 this.get('/api/users', () => ({ users: [...] }))。我建议一开始就把路径、方法、字段名按后端约定来，不要自己随手写 /users。后面替换真实接口时，页面代码几乎不用动。
如果项目用 axios，请确认 baseURL 和 Mirage 路由能对上。比如 axios 请求 /api/products，Mirage 也要写 this.get('/api/products')。很多人说“mirage怎么用都没反应”，十有八九是请求地址没匹配上。
数据怎么造：少写死，多用 seeds
刚开始我也喜欢在路由里直接 return 三条数据，改着改着就乱了。后来改成 seeds 里统一创建数据，再在 routes 里读取。比如 server.createList('product', 20)，列表页、详情页、搜索页都能共用同一批假数据。
如果页面状态多，建议至少准备四种数据：正常列表、空列表、超长文本、异常返回。比如商品名放到 40 个字，头像给一个空值，价格给 0。很多 UI 问题不是业务复杂，而是假数据太干净。
最后提醒：Mirage好用，但别长期替代联调
我的感受是，Mirage 最适合前端独立推进页面和状态，不适合拿来证明接口一定没问题。字段类型、分页规则、权限错误这些，最后还是要跟真实后端碰一遍。
mirage怎么用才顺？就三句话：入口只启动一次，路由贴近真实接口，假数据故意造脏一点。做到这三点，它不是玩具，是真能省时间的开发工具。
常见问题
mirage怎么用在React项目里？
在 src 下建 mirage/server.js，导出 createServer 配置；再在 main.jsx 或 index.jsx 里判断开发环境后调用 makeServer()，不要在组件里创建。
Mirage JS会影响线上接口吗？
只要你只在 development 环境启动，并且打包时不调用 makeServer，一般不会影响线上。上线前最好搜一下项目里有没有残留的 makeServer 调用。
mirage请求不到接口怎么办？
先看浏览器 Network 里的请求路径，再对照 routes 里的路径和方法。GET、POST 写错，或者 baseURL 多了 /api，是最常见原因。