Vue3+TS+Vite项目实战：5分钟搞定Mock数据接入（附完整代码）

Vue3TSVite项目实战5分钟实现动态权限Mock系统最近在重构后台管理系统时遇到一个典型痛点前端页面都开发完了后端接口还在设计中。这种前后端进度不匹配的情况相信每个前端开发者都深有体会。今天分享的这套Mock方案不仅能模拟基础数据返回还能完整复现动态路由权限控制的业务场景真正实现前后端分离开发的理想状态。1. 环境搭建与基础配置首先确保项目已经初始化了Vue3TypeScriptVite环境。如果还没创建项目可以通过以下命令快速初始化npm create vitelatest my-vue-app --template vue-ts进入项目目录后安装Mock方案的核心依赖npm install vite-plugin-mock mockjs -D这里我们选择vite-plugin-mock而不是常见的mockjs单独使用是因为它与Vite深度集成支持热更新且配置更简单。同时安装mockjs作为数据生成工具。在项目根目录创建mock文件夹这是存放所有Mock数据的约定目录。新建mock/user.ts文件开始编写我们的第一个Mock接口// mock/user.ts import { MockMethod } from vite-plugin-mock export default [ { url: /api/login, method: post, timeout: 500, response: () { return { code: 200, data: { token: mock-token-123456, username: admin } } } } ] as MockMethod[]注意这里使用了TypeScript的类型断言确保我们的Mock配置符合vite-plugin-mock的类型要求。2. Vite配置与Mock服务启用接下来配置vite.config.ts文件启用Mock服务// vite.config.ts import { defineConfig } from vite import vue from vitejs/plugin-vue import { viteMockServe } from vite-plugin-mock export default defineConfig({ plugins: [ vue(), viteMockServe({ mockPath: mock, // Mock文件存放目录 localEnabled: true, // 开发环境启用 prodEnabled: false, // 生产环境禁用 injectCode: import { setupProdMockServer } from ../mock; setupProdMockServer(); // 可选的生产环境Mock方案 }) ] })关键配置参数说明参数名类型默认值说明mockPathstringmockMock文件存放目录localEnabledbooleanfalse开发环境是否启用prodEnabledbooleanfalse生产环境是否启用loggerbooleantrue是否在控制台显示请求日志injectCodestring注入到main.ts的代码配置完成后启动开发服务器Mock服务会自动生效npm run dev3. 实现动态路由权限Mock现在我们来模拟一个完整的动态路由权限控制系统。首先在mock/user.ts中扩展路由数据// mock/user.ts const dynamicRoutes [ { path: /system, component: Layout, meta: { title: 系统管理, icon: setting, roles: [admin] }, children: [ { path: user, component: system/user, meta: { title: 用户管理, roles: [admin] } } ] }, { path: /dashboard, component: Layout, meta: { title: 仪表盘, icon: dashboard, roles: [admin, editor] } } ] export default [ // 登录接口 { url: /api/login, method: post, response: ({ body }) { if (body.username admin) { return { code: 200, data: { token: admin-token, roles: [admin] } } } else { return { code: 200, data: { token: editor-token, roles: [editor] } } } } }, // 路由接口 { url: /api/routes, method: get, response: ({ headers }) { const token headers.authorization if (!token) { return { code: 401, message: 未授权 } } const isAdmin token.includes(admin) return { code: 200, data: dynamicRoutes.filter(route isAdmin || !route.meta?.roles || route.meta.roles.includes(editor) ) } } } ] as MockMethod[]这个Mock实现了几项关键功能根据不同用户返回不同token基于token中的角色信息过滤路由完整的权限控制逻辑4. 前端业务代码集成在前端项目中我们需要创建对应的请求和状态管理。首先封装axios实例// src/utils/request.ts import axios from axios const service axios.create({ baseURL: import.meta.env.VITE_API_URL, timeout: 5000 }) // 请求拦截器 service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config }) // 响应拦截器 service.interceptors.response.use( response { return response.data }, error { return Promise.reject(error) } ) export default service然后实现登录和路由获取的逻辑// src/api/user.ts import request from /utils/request interface LoginData { username: string password: string } interface RouteItem { path: string component: string meta?: { title?: string icon?: string roles?: string[] } } export const login (data: LoginData) { return request({ url: /api/login, method: post, data }) } export const getRoutes () { return requestRouteItem[]({ url: /api/routes, method: get }) }在Pinia/Vuex中管理用户状态和路由// src/store/user.ts import { defineStore } from pinia import { login, getRoutes } from /api/user export const useUserStore defineStore(user, { state: () ({ token: , routes: [] as RouteItem[], roles: [] as string[] }), actions: { async login(loginData: LoginData) { const res await login(loginData) this.token res.data.token this.roles res.data.roles localStorage.setItem(token, res.data.token) }, async fetchRoutes() { const res await getRoutes() this.routes res.data return res.data } } })5. 常见问题与调试技巧在实际开发中可能会遇到以下典型问题问题1Mock接口不生效检查vite.config.ts中的localEnabled是否设置为true确认Mock文件后缀为.ts且位于正确目录查看控制台是否有Mock服务启动日志问题2生产环境意外启用Mock确保prodEnabled设置为false可以通过环境变量动态控制viteMockServe({ localEnabled: import.meta.env.DEV, prodEnabled: false })问题3TypeScript类型报错安装types/mockjs获取类型定义为自定义Mock数据添加类型注解interface MockResponse { code: number data: any message?: string } const response: MockResponse { code: 200, data: { /*...*/ } }调试时可以使用浏览器开发者工具的Network面板查看Mock请求所有Mock请求都会带有[vite-plugin-mock]前缀的标记。6. 高级Mock技巧对于更复杂的场景我们可以实现以下高级功能动态响应数据{ url: /api/user/:id, method: get, response: ({ query }) { return { code: 200, data: { id: query.id, name: 用户${query.id}, age: Math.floor(Math.random() * 30) 20 } } } }延迟响应模拟网络状况{ url: /api/slow, method: get, timeout: 2000, // 2秒延迟 response: () ({ /*...*/ }) }Mock文件分模块管理/mock /system user.ts role.ts /dashboard analysis.ts index.ts // 统一导出在index.ts中聚合所有Mock模块import system from ./system/user import dashboard from ./dashboard/analysis export default [...system, ...dashboard]使用Mock.js生成更真实的数据import Mock from mockjs { url: /api/users, method: get, response: () { return Mock.mock({ list|10: [{ id|1: 1, name: cname, age|20-40: 1, email: email, address: county(true) }] }) } }这套Mock方案已经在我们多个线上项目中得到验证特别是在大型后台管理系统开发中能够显著提升前后端并行开发效率。实际使用中可以根据项目需求灵活调整Mock数据的复杂度和响应逻辑。