JS Mock核心是不改业务代码、按真实接口契约返回数据；分三种方式：直接写死（适合简单场景）、Mock.js+Axios拦截器（推荐主流）、Vite/Webpack插件（适合复杂协作），并需覆盖空列表、错误码、分页、延迟等边界场景。
前端接口联调前用 JS Mock 模拟后端数据，核心是“不改业务代码、按真实接口契约返回数据”。重点不是造一堆假数据，而是让请求发出去后，能被精准拦截并返回结构一致、场景覆盖的响应。
直接在项目里写死 Mock（适合快速验证）
适用于刚搭页面、只测单个字段渲染或断网调试。不用装包、不走网络，纯本地开关控制：
- 定义一个布尔变量如 const USE_MOCK = true，只在开发环境生效
- 按后端约定的字段结构写 JSON 对象，比如 id/name/age 和真实接口字段名、嵌套层级完全一致
- 在请求函数里加判断：如果开启 Mock，就直接 resolve(mockData)；否则调真实 API
- 注意：这种写法无法模拟不同参数返回不同结果（比如 /user?id=1 和 /user?id=2），仅限最简场景
用 Mock.js + Axios 拦截器（推荐主流做法）
这是目前 Vue/React 项目中最常用、可长期维护的方式。前端照常写 axios.get('/api/user')，底层自动被拦截并返回模拟数据：
- 安装依赖：npm install mockjs axios-mock-adapter --save-dev
- 创建 mock 配置文件，例如 src/mock/index.js，里面用 Mock.mock() 或 mock.onGet().reply() 定义路径、方法、状态码和返回体
- 在入口文件（如 main.js）中，仅开发环境引入该 mock 文件
- 返回数据建议包含完整结构：code/message/data，和后端最终格式对齐，避免后期返工
用 Vite / Webpack 插件做服务级 Mock（适合团队协作）
当项目有多个接口、多人并行、需要分页/异常/延时等复杂逻辑时，推荐用插件统一管理：
立即学习“前端免费学习笔记（深入）”；
- Vite 项目装 vite-plugin-mock，把每个接口写成单独文件，放在 src/mock/modules/ 下
- 每个文件导出一个对象，包含 url、method、response，支持函数式动态返回（比如根据 query 参数返回不同列表）
- 插件会在开发服务器启动时自动注入 Mock 服务，无需手动初始化，且支持跨域、超时、500 错误等真实网络行为模拟
- 上线前只需关闭插件配置，所有业务代码零修改
别漏掉关键边界场景
Mock 不只是填正常数据，更要提前验证前端健壮性：
- 空列表：data: [] 或 data: { list: [] }，检查页面是否显示“暂无数据”
- 错误码：code: 401 或 500，看是否触发登录跳转或错误提示
- 分页字段：total/pageNo/limit 都要和后端文档一致，避免前端计算错总页数
- 延迟响应：setTimeout(resolve, 800) 模拟慢接口，测试 loading 状态是否正常
