背景问题：
开发阶段需要 Mock 数据。
方案思考：
使用 Mock 服务进行前后端并行开发。
具体实现：
使用 MSW (Mock Service Worker) 进行 Mock：
// mock/index.jsimport{setupWorker}from'msw/browser'import{rest}from'msw'import{userHandlers}from'./user'// 创建 Mock workerexportconstworker=setupWorker(...userHandlers)// 启动 Mock 服务exportasyncfunctionstartMockServer(){if(import.meta.env.VITE_APP_MOCK==='true'){awaitworker.start({onUnhandledRequest:'bypass',// 不处理的请求直接转发serviceWorker:{url:'/mockServiceWorker.js'}})console.log('Mock 服务已启动')}}用户模块 Mock 数据：
// mock/user.jsimport{rest}from'msw'// 模拟用户数据constmockUsers=[{id:1,username:'admin',email:'admin@example.com',status:'1',createTime:'2023-01-01'},{id:2,username:'user1',email:'user1@example.com',status:'1',createTime:'2023-01-02'},{id:3,username:'user2',email:'user2@example.com',status:'0',createTime:'2023-01-03'}]// 用户相关的 Mock 处理器exportconstuserHandlers=[// 获取用户列表rest.get('/api/system/user/list',(req,res,ctx)=>{constpage=parseInt(req.url.searchParams.get('pageNum'))||1constsize=parseInt(req.url.searchParams.get('pageSize'))||10conststart=(page-1)*sizeconstend=start+sizeconstusers=mockUsers.slice(start,end)returnres(ctx.json({code:200,data:{rows:users,total:mockUsers.length}}))}),// 获取用户详情rest.get('/api/system/user/:id',(req,res,ctx)=>{const{id}=req.paramsconstuser=mockUsers.find(u=>u.id===parseInt(id))if(!user){returnres(ctx.status(404),ctx.json({code:404,message:'用户不存在'}))}returnres(ctx.json({code:200,data:user}))}),// 创建用户rest.post('/api/system/user',async(req,res,ctx)=>{constuserData=awaitreq.json()// 模拟创建成功constnewUser={id:mockUsers.length+1,...userData,createTime:newDate().toISOString().split('T')[0]}mockUsers.push(newUser)returnres(ctx.json({code:200,data:newUser,message:'创建成功'}))}),// 更新用户rest.put('/api/system/user',async(req,res,ctx)=>{constuserData=awaitreq.json()constindex=mockUsers.findIndex(u=>u.id===userData.id)if(index===-1){returnres(ctx.status(404),ctx.json({code:404,message:'用户不存在'}))}mockUsers[index]={...mockUsers[index],...userData}returnres(ctx.json({code:200,data:mockUsers[index],message:'更新成功'}))}),// 删除用户rest.delete('/api/system/user/:id',(req,res,ctx)=>{const{id}=req.paramsconstindex=mockUsers.findIndex(u=>u.id===parseInt(id))if(index===-1){returnres(ctx.status(404),ctx.json({code:404,message:'用户不存在'}))}mockUsers.splice(index,1)returnres(ctx.json({code:200,message:'删除成功'}))})]使用 Vite 插件进行 Mock：
// vite/plugins/mock.jsimport{defineConfig,loadEnv}from'vite'import{viteMockServe}from'vite-plugin-mock'exportfunctionconfigMockPlugin(isBuild){returnviteMockServe({ignore:/^_/,// 忽略以下划线开头的文件mockPath:'mock',// mock文件夹位置localEnabled:!isBuild,// 开发环境启用prodEnabled:false,// 生产环境不启用injectCode:`import { setupProdMockServer } from '../mock/index.js'; setupProdMockServer();`,})}在 main.js 中集成 Mock：
// main.jsimport{createApp}from'vue'importAppfrom'./App.vue'importpiniafrom'@/stores'importrouterfrom'@/router'asyncfunctionstartApp(){// 开发环境启动 Mock 服务if(import.meta.env.DEV){const{startMockServer}=awaitimport('@/mock')awaitstartMockServer()}constapp=createApp(App)app.use(pinia)app.use(router)app.mount('#app')}startApp()
