Vue 3 中 Axios 结合 Mock.js 模拟接口数据的核心是开发阶段通过 vite-plugin-mock 将 /mock-api 开头的请求自动匹配并响应模拟数据，不修改业务代码；生产环境自动禁用 Mock，真实请求后端。
Vue 3 中 Axios 结合 Mock.js 模拟接口数据，核心是让前端在不依赖后端真实接口的情况下，发起标准 HTTP 请求（如 axios.get('/api/user')），却能收到由 Mock.js 生成的假数据响应。整个过程不改业务代码，只在开发阶段注入模拟逻辑。
安装与基础配置
确保项目已安装必要依赖：
-
npm install axios -S（运行时依赖） -
npm install mockjs -D或yarn add mockjs -D（开发时依赖）
若使用 Vite，推荐搭配 vite-plugin-mock 插件，它自动将 Mock.js 数据转为本地 HTTP 服务，与 Axios 完全兼容，无需手动拦截请求。
创建 Mock 数据文件
在 src/mock/ 下新建 user.ts（或 .js）：
立即学习“前端免费学习笔记（深入）”；
import { MockMethod } from 'vite-plugin-mock';
export default [
{
url: '/api/user/list',
method: 'get',
response: () => {
return {
code: 200,
data: Array.from({ length: 10 }, (_, i) => ({
id: i + 1,
name: `用户${i + 1}`,
email: `${Math.random().toString(36).substr(2, 8)}@example.com`,
createTime: new Date().toISOString().split('T')[0]
}))
};
}
}
] as MockMethod[];
该文件定义了路径 /api/user/list 的 GET 响应，返回结构符合常见后端约定（含 code 和 data）。
接入 Axios 请求（不改业务层）
保持 src/utils/request.ts 封装不变，例如：
import axios from 'axios';
const request = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_API, // 开发时设为 '/mock-api'
timeout: 10000
});
export default request;
在组件中直接调用：
import request from '@/utils/request';
// 发起真实风格请求，Mock 自动响应
const res = await request.get('/api/user/list');
只要 VITE_APP_BASE_API 在 .env.development 中设为 /mock-api，vite-plugin-mock 就会把所有以 /mock-api 开头的请求，匹配到上面定义的 Mock 规则并返回模拟数据。
环境区分与上线处理
避免 Mock 代码进入生产包：
- vite-plugin-mock 默认只在开发模式生效（
localEnabled: true） - 生产构建时，插件自动禁用，Axios 会真实请求后端地址
- 也可通过
prodEnabled: false显式关闭生产环境 Mock
这样，同一套请求代码，开发时走 Mock，上线后自动切到真实接口，零修改、零风险。
