搭建 Mock 服务，实现前端自调

现在项目都是前后端分离的了，而对于个人开发来说，尤其对于前端工程师来说，前端开发开发需要调用接口，需要数据。不可能这时去开发一个后端再返回来接着开发，所以搭建 Mock 服务，实现前端自调是非常重要的，本章内容由此而来，记录自己的学习搭建过程。

使用node.js和mock.js搭建 Mock 服务

使用 koa 、 koa-router 搭建路由和监听服务

nodemon 监听更新并重载

const Koa=require('koa');
const Router=require('koa-router');const mockList=require('./mock/index')const app=new Koa();
const router=new Router();async function getRes(fn){return new Promise((resolve)=>{setTimeout(()=>{const res=fn()resolve(res)},1000)})
}// 注册路由
mockList.forEach(item=>{const {url, method, response} = item;router[method](url,async ctx=>{const res= await getRes(response)ctx.body=res;})
})app.use(router.routes())
app.listen(3005)"dev": "nodemon index.js"

模拟网络请求的加载状态，1s

async function getRes(fn){return new Promise((resolve)=>{setTimeout(()=>{const res=fn()resolve(res)},1000)})
}

然后就需要解决跨域问题了。

vite就只需要在vite.config.js中配置

server: {proxy: {"/api": {target: "http://localhost:3005", // 后端接口地址changeOrigin: true, // 是否更改 origin 头},},},

webpack的比较复杂好像，需要用到craco，有用过朋友可以说一下，0.o

最终结果：

后面随着项目开发，遇到新问题，再回来记录。