前端开发中最常见的阻塞点之一，就是后端接口还没出来，页面已经写完了却没法联调。有些团队靠手写 json 文件应付，有些直接在代码里写死假数据，等到接口真正上线再一点点替换，不仅效率低，还容易遗漏。其实 Vue 3 加上 Vite 之后，搭建一套工程化的 Mock 服务并不复杂，配合 Apifox 或 YApi 这类接口管理平台，可以让 Mock 数据从接口定义自动生成，前端在真实请求链路上开发，后端就绪后几乎零成本切换。本文就从实际项目出发，聊聊这套方案怎么落地。
为什么需要在 Vue 3 中做工程化 Mock
先说清楚一个概念：Mock 不等于造假数据。很多前端同学理解的 Mock，就是在组件里写一个假数组渲染上去，这种做法的问题在于，它绕过了整个请求链路。axios 封装、拦截器、错误处理、loading 状态、分页逻辑这些代码全都没被验证过，等接口真来了，这些层的问题会集中爆发。
工程化 Mock 的核心思路是：让请求真实发出去，由 Mock 层在开发服务器或独立服务上拦截并返回模拟数据。这样你写的请求代码、响应类型定义、异常分支都是真实运行的，切换到后端接口时只需要改一个环境变量，代码一行不用动。
在 Vue 3 + Vite 的技术栈下，常见的落地方式有三种：利用 Vite 插件在本地拦截请求、用 Apifox 自带的本地 Mock 服务、依托团队自建的 YApi 平台。三者的本质都是提供一个假的 HTTP 服务，区别在于数据从哪来、谁来维护、和接口文档的联动程度如何。
方案一：Apifox 本地 Mock 服务集成
Apifox 是近两年国内团队用得比较多的接口管理工具，它集接口文档、调试、Mock、自动化测试于一体。它最大的优势是 Mock 数据和接口定义强绑定：接口文档里定义了字段名、类型、含义之后，Mock 数据会按照数据模型自动生成，比如姓名字段返回真实感的中文名，手机号返回符合规则的号码，时间字段返回合理的时间串。
集成到 Vue 3 项目的步骤如下。第一步，在 Apifox 中创建项目并定义接口，重点是给每个字段设置合适的数据类型和 mock 规则。第二步，Apifox 客户端启动本地 Mock 服务，默认地址一般是 http://127.0.0.1:2273，每个接口会有一个对应的 Mock URL。第三步，在 Vue 项目的 .env.development 中把 API 基础地址指向这个本地服务，或者通过 Vite 代理转发。
Vite 的代理配置写在 vite.config.ts 中，把 /api 前缀的请求转发到 Apifox 的 Mock 地址：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
server: {
proxy: {
'/api': {
target: 'http://127.0.0.1:2273',
changeOrigin: true,
// 如果 Apifox 中接口路径带了统一前缀，这里可以重写
rewrite: (path) => path
}
}
}
})这样配置的好处是业务代码里只需要写相对路径，比如 axios.get('/api/users')，开发环境走 Apifox Mock，生产环境把代理目标换成真实后端即可，请求代码完全不用改。
Apifox 还支持「智能 Mock」和自定义脚本。如果某些接口的数据之间存在关联，比如列表页返回的 id 需要和详情页的入参对上，可以在接口的前置脚本里写自定义逻辑。另外它的本地服务支持延迟模拟，可以设置接口响应延迟几百毫秒，方便测试 loading 态和骨架屏效果，这个细节对界面还原度很有帮助。
方案二：YApi 平台搭建与自动化 Mock
YApi 是去哪儿网开源的接口管理平台，适合有自建需求的团队。它的特点是部署在自己服务器上，数据完全内网可控，对于接口安全要求高的公司（比如金融、政务类项目）是更稳妥的选择。YApi 内置了基于 swagger 和 mock.js 的 Mock 服务，接口定义好之后立刻就能拿到一个可访问的 Mock 地址。
部署 YApi 推荐用官方提供的 Docker 方式，一条命令就能跑起来：
# 拉取并启动 YApi，默认使用内置 mongoDB docker run -d --name yapi \ -p 3000:3000 \ -e YAPI_ADMIN_ACCOUNT=admin@ipipp.com \ -e YAPI_ADMIN_PASSWORD=admin123 \ yapipro/yapi:latest
启动后访问 http://127.0.0.1:3000 就能进入管理界面。项目成员在 YApi 上创建接口，支持从 Swagger、OpenAPI 文档一键导入，字段结构会自动解析成 mock 规则。每个接口都会有一个 Mock 地址，形如 /mock/项目ID/接口路径。
在 Vue 3 项目里接入时，同样通过环境变量加代理的方式。假设 YApi 部署在内网 http://192.168.0.1:3000，项目 ID 是 25：
// vite.config.ts
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://192.168.0.1:3000/mock/25',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})注意这里的 rewrite 把 /api 前缀去掉了，因为 YApi 的 Mock 路径是 /mock/25/接口路径，前缀已经包含在 target 里。这个细节容易踩坑：如果代理后返回 404，第一件事就是检查路径重写逻辑是否正确。
YApi 的 mock.js 语法也比较灵活，比如字段规则写 @cname 生成中文名，@integer(1, 100) 生成随机整数，@datetime 生成时间。团队协作上，YApi 支持接口分组、成员权限管理，后端在平台上维护接口文档，前端直接消费 Mock 地址，天然解决了文档和 Mock 不同步的问题。
环境切换与团队协作的工程化细节
上面两种方案都有一个共同点：需要优雅地处理开发、联调、生产多环境的切换。Vue 3 项目推荐用 Vite 的环境变量体系来管理。创建 .env.development 和 .env.production：
# .env.development VITE_API_BASE=/api # .env.production VITE_API_BASE=https://api.ipipp.com
在 axios 封装中读取这个变量作为 baseURL：
import axios from 'axios'
const request = axios.create({
baseURL: import.meta.env.VITE_API_BASE,
timeout: 10000
})
request.interceptors.response.use(
(response) => response.data,
(error) => {
// 统一处理 Mock 阶段和真实接口阶段的错误
console.error('请求异常：', error.message)
return Promise.reject(error)
}
)
export default request这套封装在 Mock 阶段就写好，等后端接口就绪，只需要改环境变量重新构建，请求层代码零改动。这是工程化 Mock 最大的价值所在。
团队协作层面还有几个建议。第一，接口定义要先行：无论用 Apifox 还是 YApi，都要求前后端在开发前先约定接口契约，字段名、类型、分页结构统一好，Mock 数据才有意义。第二，建议给接口响应定义统一的 TypeScript 类型，Apifox 可以直接导出 TS 类型定义，放到项目的 types 目录中，前端在 Mock 阶段就能获得完整的类型提示。第三，Mock 数据要贴近真实：列表至少造二三十条，字段长度、格式要符合业务规则，否则分页、搜索、虚拟滚动这些功能在 Mock 阶段验证不出来。
两种方案怎么选
简单对比一下。Apifox 是 SaaS 加客户端的形态，开箱即用，Mock 规则智能程度高，适合中小团队或者对部署运维没有余力的团队；缺点是数据在第三方平台上，部分公司安全合规过不了。YApi 需要自己部署维护，有一定的运维成本，mock 规则要手动写一部分，胜在内网可控、免费开源，适合对数据安全敏感或者规模较大、有基础设施团队的公司。
实际项目里也不必二选一。一种常见做法是：平时开发用 Apifox 个人空间快速 Mock，接口评审定稿后同步到公司的 YApi 作为正式契约库。只要前端请求层是通过环境变量加代理解耦的，切换 Mock 数据源对业务代码就是透明的。
总的来说，Mock 服务的工程化不只是换个数据来源，而是把接口契约、数据模拟、环境切换、类型定义串成一条完整的链路。这条链路搭好之后，前后端可以真正并行开发，前端不再等接口，联调周期也能明显缩短，这在国内大部分快节奏的项目里是非常实际的价值。
Vue 3 Mock数据ApifoxYApi修改时间：2026-09-14 04:08:49