vite-plugin-mock 是 Vite 原生轻量 mock 服务，开发时内建启动、零后端依赖，通过 mockPath 指定文件目录，localEnabled 控制仅开发启用，watchFiles 支持热更新，response 可调用 Mock.mock 生成动态数据，生产构建自动剥离，接口 URL 与真实环境一致，联调切换只需配置一行。
直接在 Vite 插件系统里集成 vite-plugin-mock，就能零后端依赖跑起本地接口服务。它不是代理、不是代理转发，而是真正由 Vite 启动时内建的轻量 mock 服务，请求发到 /api/xxx 就能实时响应，开发阶段完全不碰真实后端。
安装与基础配置
确保已安装核心依赖：
-
mockjs：生成动态随机数据（如@cname、@integer(1-100)） -
vite-plugin-mock：Vite 原生插件，接管请求并匹配 mock 规则
执行安装命令（推荐固定版本避免兼容问题）：
npm install mockjs -D<br>npm install vite-plugin-mock@2.9.6 -D
在 vite.config.ts 中启用插件，关键配置项需明确：
-
mockPath: 'mock'：约定 mock 文件统一放在项目根目录mock/文件夹 -
localEnabled: true：仅开发环境（vite dev）生效，生产构建自动关闭 -
watchFiles: true：修改 mock 文件后热更新，无需重启服务 -
supportTs: true：若用 TypeScript 写 mock，必须开启；开启后只读.ts文件，忽略.js
编写可运行的 Mock 接口文件
在项目根目录新建 mock/ 文件夹，添加 index.ts（或按需拆分多个文件）：
- 每个接口导出为
MockMethod对象数组，含url、method、response -
response可返回静态对象，也可调用Mock.mock()生成结构化随机数据 - 支持 URL 参数解析（
req.query）、请求体解析（req.body），方便模拟分页、搜索等逻辑
示例（返回带分页的用户列表）：
HISUI 前端框架开发指南（IRIS版）
下载
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
import { MockMethod } from 'vite-plugin-mock'<br>import Mock from 'mockjs'<br><br>export default [<br> {<br> url: '/api/users',<br> method: 'get',<br> response: ({ query }) => {<br> const { page = 1, pageSize = 10 } = query<br> const list = Mock.mock({<br> 'list|' + pageSize: [<br> {<br> 'id|+1': 1,<br> 'name': '@cname',<br> 'email': '@email',<br> 'status|1': ['active', 'inactive']<br> }<br> ]<br> })<br> return {<br> code: 200,<br> data: {<br> list: list.list,<br> total: 127,<br> page: Number(page),<br> pageSize: Number(pageSize)<br> }<br> }<br> }<br> }<br>] as MockMethod[]
前端调用与调试验证
接口定义好后，无需额外启动服务，直接像调真实 API 一样发起请求：
- 用
axios.get('/api/users?page=2&pageSize=5')即可拿到 mock 数据 - 浏览器 Network 面板能看到
200 OK响应，且请求地址就是你写的url - 控制台默认输出 mock 请求日志（如需关闭，配置
logger: false）
常见调试技巧：
- 故意写错 URL 或 method，观察是否返回 404 —— 验证插件是否生效
- 在
response函数里加console.log打印req.query，确认参数解析正确 - 临时把
response改成throw new Error('模拟报错')，测试前端异常处理逻辑
环境隔离与上线安全
这套方案天然适配多环境：
- 开发时：通过
localEnabled: true自动启用，所有/api/*请求走 mock - 构建生产包时：
prodEnabled: false（默认）让插件彻底不加载，无任何代码残留 - 如需灰度启用线上 mock（极少数场景），可设
prodEnabled: true并配合环境变量开关
整个过程不侵入业务代码，不修改 axios 拦截器，也不需要改请求 baseURL —— 真实接口 URL 和 mock URL 完全一致，联调切换只需改一行配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
