Vue 3 集成 Mock.js 的核心目标是前端独立开发调试：安装 mockjs -D，按模块组织规则（如 user.js、login.js），在 main.ts 中通过 import.meta.env.DEV 条件引入，确保仅开发启用，并与 API 请求路径严格匹配。
Vue 3 项目集成 Mock.js 的核心目标很明确：让前端在后端接口未就绪时，也能照常开发、调试和联调。不依赖真实后端，不卡进度，不反复返工。
安装与基础配置
Mock.js 本身是纯前端模拟库，轻量且无运行时依赖。推荐按开发依赖安装：
-
npm install mockjs -D（或yarn add mockjs -D） - 不需要额外装插件（如 vite-plugin-mock）也能用，但若项目已用 Vite，可选装
vite-plugin-mock@2.9.6获得热更新、环境自动开关等增强能力 - 创建
src/mock/目录作为统一入口，避免散落各处
编写可维护的 Mock 规则
别把所有规则堆在单个文件里。建议按模块组织，例如：
-
src/mock/index.js：统一注册入口，用require.context自动加载子文件 -
src/mock/user.js：用户相关接口（/api/users、/api/users/:id） -
src/mock/login.js：登录登出逻辑（支持参数解析、token 模拟、错误响应）
每个模块导出数组，每条规则含 url（正则匹配）、method、response。例如：
Miller CSV TSV JSON 数据处理器
下载
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
立即学习“前端免费学习笔记（深入）”；
export default [
{
url: '/api/users',
method: 'get',
response: ({ url }) => {
const { page = 1, size = 10 } = Object.fromEntries(new URL(url).searchParams);
return {
code: 200,
data: {
list: Mock.mock({ 'list|' + size: [{ 'id|+1': 1, name: '@cname', email: '@email' }] }).list,
total: 97
}
}
}
}
]
在项目中安全启用
Mock 必须只在开发阶段生效，生产环境必须彻底关闭。最稳妥做法是条件引入：
- 在
main.js或main.ts中加判断：
if (import.meta.env.DEV) {
require('./mock')
}
- 不使用
process.env（Vue CLI 风格），Vite 项目统一用import.meta.env.DEV - 如果用了
vite-plugin-mock，它默认只在开发模式启用，无需手动控制
对接真实请求逻辑
Mock 生效的前提是请求地址与拦截规则完全匹配。因此：
- API 请求封装（如
src/api/user.ts）里的 URL 要和 Mock 文件中定义的一致，比如都用/api/users，而不是带 base API 的完整路径 - Axios 实例建议配置
baseURL: ''（空字符串），避免前缀干扰 Mock 匹配 - 需要动态参数（如
/api/users/123）时，Mock 规则 URL 写成正则：/^\/api\/users\/\d+$/，或借助插件自动解析
这样，组件中调用 getUserList() 时，实际发出去的请求会被 Mock 拦截并返回模拟数据，体验和真接口几乎无差别。
