Vue 3项目需并行使用Mock接口联调和开发代理：本地用mockjs快速验证逻辑，开发环境通过vite-plugin-mock统一管理mock规则并按需开关，同时配置VITE_PROXY代理真实后端接口实现无缝切换。
Vue 3 项目初始化后，Mock 接口联调和开发代理不是“选配”，而是并行开发的刚需。核心逻辑很清晰：本地用 Mock 快速验证业务逻辑，开发环境通过代理对接真实后端，两者互不干扰、按需切换。
安装 Mock 依赖并统一入口管理
推荐使用 mockjs + vite-plugin-mock（Vite 项目）或 mockjs + 手动 setup（Vue CLI 或轻量项目）。优先选择插件方案，热更新快、生产自动失效、无侵入：
- 执行命令安装：
npm install mockjs -D（开发依赖），若用 vite-plugin-mock，则额外加npm install vite-plugin-mock@2.9.6 -D - 在
src/mock/下建index.ts（或index.js）作为统一入口，集中引入各模块 mock 文件（如user.mock.ts、article.mock.ts） - 在
main.ts顶部直接导入：import './mock'—— 注意仅在开发环境生效，生产构建时该行会被 Tree-shaking 移除
编写贴近真实接口的 Mock 规则
Mock 的价值不在“能跑”，而在“像真”。字段名、嵌套结构、状态码、分页格式必须与后端约定一致。例如登录接口返回：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
mock('/api/login', 'post', {
code: 0,
message: 'ok',
data: {
token: '@string(32)',
userInfo: {
id: '@integer(1000, 9999)',
username: '@cname',
role: 'admin'
}
}
})
- 路径用完整 URL 前缀（如
/api/login），避免和真实请求路径冲突 - 支持正则匹配（
new RegExp('^/api/user/\d+$')）模拟动态 ID 请求 - 用
Mock.setup({ timeout: '200-600' })模拟网络延迟，更贴合真实体验
配置 Vite 开发代理解决跨域
当后端运行在 http://localhost:3000，而 Vue 项目跑在 http://localhost:3100 时，需在 .env.development 中配置代理规则：
VITE_PROXY = [["/api", "http://localhost:3000"]] VITE_GLOB_API_URL = /api
- 所有以
/api开头的请求（如axios.post('/api/login')）会自动被代理到http://localhost:3000/login - 代理只在开发环境生效；生产环境走
VITE_GLOB_API_URL配置的真实域名 - 注意：代理前缀必须和接口请求路径完全一致，否则不触发转发
联调阶段无缝切换 Mock 与真实接口
不需要删代码、改请求地址。只需一个开关控制是否启用 Mock：
- 在
src/mock/index.ts顶层加判断：if (import.meta.env.DEV && !import.meta.env.VITE_USE_REAL_API)，再注册 mock 规则 - 在
.env.development中新增开关：VITE_USE_REAL_API = false（默认走 Mock），联调时改为true即可停用 Mock - 接口层保持统一调用方式（如
loginApi()），内部自动根据环境决定走 mock 还是 axios 实例
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
