「后端接口下周才给前端页面这周就要交付。」这句话大概是前后端分离项目里前端听到最多次的噩梦开场。前端难道只能干等不用。前端完全可以先把整个 App 独立跑起来界面、路由、状态、交互全部自给自足唯一的等待点——后端接口——用 Mock 顶上去。这篇文章带你从 0 搭一套前端 API 工程读完你能拿到统一管理接口的api/目录一行代码切换 Mock / 真实后端完整可运行代码 5 个踩坑提醒全程 3 步10 分钟就能跑起来。项目开始前先想清楚一件事前后端分离的项目前端有自己的三驾马车组件响应式 路由 状态管理它们撑起了整个独立的前端应用。但前端真的彻底独立了吗没有还剩最后一个耦合点/api接口。页面要渲染数据就得向后端要。后端开发慢、排期晚前端就卡住——这就是傻等后端的根源。所以解决方案不是等而是前端自己先造一个接口后端等真后端就绪再一键切过去。这就是前端 API 工程。第一步搭一个 api 目录统一管理所有接口很多项目里请求东写一个fetch西写一个axios散落在各个组件里。一旦后端改路径、换域名前端就得满项目找改到怀疑人生。正确做法建一个api/目录把前端所有的接口请求统一收编。先建一个 axios 实例统一配置// src/api/config.js —— 全局唯一 axios 实例importaxiosfromaxios;constinstanceaxios.create({baseURL:/api,// 开发阶段走 vite mock// baseURL: http://localhost:3000, // 后端就绪后一键切换timeout:5000,// 5 秒超时});exportdefaultinstance;再按模块拆分接口文件一个模块一个 js// src/api/todos.js —— todos 相关的接口importaxiosfrom./config;exportconstgetTodosasync(){constresawaitaxios.get(/todos);returnres.data;};注意get(/todos)加上 baseURL/api实际请求是/api/todos。组件里再也看不到axios长什么样只调用getTodos()。接口层从此和后端一样可以独立演进。第二步vite-plugin-mock2 行配置把后端跑起来接口层有了谁来响应Mock。用vite-plugin-mock在vite.config.js里加两行配置// vite.config.jsimport{defineConfig}fromviteimportreactfromvitejs/plugin-reactimport{viteMockServe}fromvite-plugin-mockexportdefaultdefineConfig({plugins:[react(),viteMockServe({mockPath:mock,// mock 文件目录localEnabled:true,// 开发环境开启}),],})然后在项目根目录建mock/todos.js模拟后端返回// mock/todos.js —— 前端自己的后端exportdefault[{url:/api/todos,method:get,timeout:2000,// 模拟网络延迟response:(req,res)({code:0,// 约定0 表示成功todos:[{id:1,title:学习前端接口工程,completed:true},{id:2,title:看龙餐馆,completed:false},],}),},];启动npm run dev浏览器访问http://localhost:5173/api/todos数据就回来了。界面还没写完的时候你还能把 Mock 里的数据结构当成接口契约丢给后端按这个字段给我。第三步页面里调用组件只关心数据Mock 就绪页面就可以完全独立开发了// src/pages/Todos.jsx import { getTodos } from ../api/todos; import { useEffect, useState } from react; function Todos() { const [todos, setTodos] useState([]); useEffect(() { // IIFE立即执行函数包住 async/await (async () { const data await getTodos(); setTodos(data); })(); }, []); return ( ul {todos.map((t) ( li key{t.id}{t.completed ? 已完成 : 未完成}{t.title}/li ))} /ul ); } export default Todos;到这里前端从路由到数据整个 App 已经能独立跑完。页面路由交给react-router-dom接口路由交给api/目录各司其职。一键切换从 Mock 到真实后端后端接口终于写好了切过去只需要改一个地方// src/api/config.jsconstinstanceaxios.create({baseURL:http://localhost:3000,// 真实后端timeout:5000,});一行配置全局生效。所有页面、所有组件都不用动。这就是把接口收进api/目录的最大好处切换成本约等于 0。踩坑提醒5 个我踩过的坑url 别漏了/api前缀baseURL 是/apimock 里的 url 也必须是/api/todos。漏一个前缀页面永远拿不到数据光报 404。mock 文件必须export default数组vite-plugin-mock只认默认导出写成export const会直接不生效而且不报错——最难查的那种。localEnabled记得区分环境开发环境开启生产环境必须关闭默认关闭。否则线上 build 会夹带 mock 代码真实接口直接被劫持。渲染列表要写keykey{t.id}不写列表一长控制台全是 warning更新时还会出各种诡异 bug。切到真实后端后跨域是下一个坑本地5173请求3000跨域。开发环境可以配 Vite 的server.proxy让后端在代理后面无感切换。总结前端 API 工程值不值得做值。表面上它只是多了个api/目录和几行 mock 配置。但长期看它带来三样东西前端不再等后端开发节奏自己掌控接口统一管理改地址、换域名只动一个文件Mock 即契约数据结构提前锁定联调成本大幅下降前后端分离分离的不仅是代码更是各自的开发节奏。而前端 API 工程就是那条把节奏握在自己手里的线。最后你也在等后端排期吗还是说你们团队已经在用 mock 开发了评论区聊聊你的等接口故事。