Zui近听说有人在开发中遇到后端崩溃的情况，导致整个页面卡死、接口报错、项目停摆，真是让人头疼。哈哈，我跟你说啊，前端工程师可不Neng只靠后端撑场面自己也得会自救。

先说说为什么后端崩溃Neng让前端整颗砸到地上。咱们大多数项目dou是前后端分离，数据全靠 API 给你。你Ru果没拿到数据，那页面就成了空壳；Ru果拿到了错误格式的数据，又得手工改代码。那种连 API dou不稳定的状态，就像在雨天撑伞却忘了带伞，直接被淋湿。

再加上团队往往按进度排期，而后端往往是“先来再Zuo”的流程。有时后端准备好接口还没测试，就把接口给交给前端用。结果呢？接口突然变形、字段消失、返回码改了——这时候前端不得不跑去修补自己的代码，导致上线延误。

所以我建议：别等后端准备好了再开始写 UI，而是要自己搞一个本地模拟环境，让业务逻辑Ke以独立跑起来。

Mock.js 其实就是一个Ke以在浏览器里拦截请求、返回伪造数据的库。它通过重写 XMLHttpRequest 或者 fetch 的方式，把原本要发往服务器的请求转成本地生成的数据。听起来hen酷吧？

原生 Mock.js 只Neng拦截 XMLHttpRequest；但现在大多数框架dou用 fetch API，所以我们需要配合插件或者自己 fetch 才Neng兼容。

不过别担心，现代构建工具dou有相应插件，让 Mock.js Neng在开发环境下轻松启动，而且生产环境自动剔除，不会把模拟代码打包进去。

Vite 的 dev server 本身就支持代理和中间件，这正好Ke以把 Mock 接口放进来。这样，当浏览器发起请求时请求先经过 dev server，再由 vite-plugin-mock 拦截并返回数据。而且你还Neng在 Chrome DevTools 的 Network 面板kan到这些请求，就像真实接口一样。

Ru果直接使用原生 Mock.js，你会发现网络面板根本kan不到任何请求，只Neng通过 console.log 来调试，那样可真麻烦。

下面给你演示一下Zui常见的目录结构和配置步骤，你Ke以直接套用到自己的项目里。

project-root/
├── src/
├── mock/
│   ├── index.ts        # Mock 服务入口
│   ├── user.ts         # 用户相关接口
│   └── list.ts         # 列表相关接口
├── vite.config.ts      # Vite 配置文件
└── package.json

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { viteMockServe } from 'vite-plugin-mock';
export default defineConfig => ({
    plugins: 
}));

下面这个例子展示了如何用 Mock.js Zuo出一个带分页、随机字段的数据列表，然后根据前端传来的 page 和 pageSize 参数切片返回对应页的数据。

import { MockMethod } from 'vite-plugin-mock';
import Mock from 'mockjs';
const dataPool = Mock.mock({
    'list|': ,
            publishDate: '@datetime',
            cover: '@image',
            views: '@integer'
        }
    ]
});
export default  as MockMethod;

假设今天凌晨你的后台突然宕机，所有接口dou掉线，你该怎么办？别慌，我来给你点实战经验：

立刻切换到本地 mock 模式：

"不对不对，我忘记打开 dev 环境里的 mock 开关了！"

检查是否用了 fetch 而不是 XHR：

"我这段代码老是在使用 fetch，但原生 Mock.js 并不会拦截它们呀！"

确保你的代理或插件Yi正确配置：

"哎呀，我又忘记把 proxy 设置成 http://localhost 后面加斜杠啦！"

"我想搞个用户列表，用 @cname 随机名字啥的，这样就Neng跑通 UI 路径啦！"

"我觉得把 mock 写在单独目录里比直接挂到 src 下geng好维护哦～"

"kan Network 面板有没有那条 /api/get-article-list 的请求，Ru果没有，那说明还没成功拦截！"

"我要把所有手动改过的字段dou记下来下次上线一定不要踩同样坑！"

"我知道你想一键复制粘贴，但那种随意敲码真的会让以后维护成本暴涨。" 哈哈，说实话，我也曾经这么Zuo过一开始挺顺利的，可当业务 到几十个模块时你就会发现每个模块dou乱七八糟，需要手动调整字段名称、类型，还得不断追踪 bug。那可真是让人抓狂呀！

手动覆盖 global.fetch:    "嘿嘿，其实我们Ke以写个小 wrapper，把所有 fetch 调用统一包装一下然后在 wrapper 内部判断是不是需要走 mock。" .

使用 msw:    "Ru果你想geng干净一点，Ke以考虑 MSW，它利用 Service Worker 在浏览器层拦截 fetch 请求，从而实现真正全局的模拟。" .

简易方案:    "Ru果项目规模小，Ke以直接改 URL 为 /__mock__/xxx.json，并用 JSON Server 或类似工具提供静态 JSON 响应。" .

当后端修改字段名或新增字段时你必须同步geng新本地 mock，否则 UI 会报错或显示空白。 ..

确保所有团队成员dou使用同一份 schema 定义，例如通过 JSON Schema 或 Swagger 文档共享 API 描述文件，并定期同步geng新。" ....

切勿将任何 mock 路径暴露给正式环境，否则可Neng泄露内部逻辑或产生不可预知行为。" ....

=style="-webkit-text-stroke-width:.5pt;color:black;-webkit-text-stroke-color:white;margin-bottom:.6rem;font-size:.9rem;font-family:sans-serif;font-weight:bolder">四、Mock 的典型使用场景：从原型到测试再到异常复现