安装以下命令

npm i vite-plugin-mock --save-dev
npm i mockjs --save-dev

在根路径下创建mock文件夹

mock\user.ts

const menuList = [{path: '/system',component: 'Layout',name: 'system',meta: {title: '系统管理',icon: 'Setting',roles: ['sys:manage']},children: [{path: '/department',component: '/system/department/department',name: 'department',meta: {title: '机构管理',icon: 'List',roles: ['sys:dept']}},{path: '/userList',component: '/system/User/UserList',name: 'userList',meta: {title: '用户管理',icon: 'UserFilled',roles: ['sys:user']}},{path: '/roleList',component: '/system/Role/RoleList',name: 'roleList',meta: {title: '角色管理',icon: 'Wallet',roles: ['sys:role']}},{path: '/menuList',component: '/system/Menu/MenuList',name: 'menuList',meta: {title: '权限管理',icon: 'Menu',roles: ['sys:menu']}}]},{path: '/test3parent',component: 'Layout',name: 'test3parent',redirect: '/test3',meta: {title: '测试1-1-1',icon: 'ShoppingBag',roles: ['sys:test']},children: [{path: '/test3',component: '/test/test3',name: 'test3',meta: {title: '测试1-1-1',icon: 'ShoppingBag',roles: ['sys:test']}}]},{path: '/goods',component: 'Layout',name: 'goods',meta: {title: '商品管理',icon: 'Tickets',roles: ['sys:goods']},children: [{path: '/phone1',name: 'phone1',meta: {title: '手机分类',icon: 'UserFilled',roles: ['sys:phoneRoot']},children: [{path: '/phone',component: '/phone/index',name: 'phone',meta: {title: '华为手机',icon: 'UserFilled',roles: ['sys:phone:index']}}]},{path: '/goodCategory',component: '/goods/goodsCategory/goodsCategoryList',name: 'goodCategory',meta: {title: '分类管理',icon: 'ShoppingBag',roles: ['sys:goodsCategory']}},{path: '/test2',name: 'test',meta: {title: '分类测试',icon: 'ShoppingBag',roles: ['sys:1']},children: [{path: '/cs1',component: '/cs1/index',name: 'cs1',meta: {title: '测试1-2',icon: 'Menu',roles: ['sys:cs1']},children: [{path: '/cs2',component: '/test/test2',name: 'cs2',meta: {title: '测试1-2-1',icon: 'Menu',roles: ['sys:cs2']}}]},{path: '/test',component: '/test/test',name: 'test',meta: {title: '测试1-1',icon: 'ShoppingBag',roles: ['sys:1-1']}}]}]},{path: '/systenConfig',component: 'Layout',name: 'systenConfig',meta: {title: '系统工具',icon: 'ChatLineSquare',roles: ['sys:systenConfig']},children: [{path: '/document',component: '/system/config/systemDocument',name: 'http://42.193.158.170:8089/swagger-ui/index.html',meta: {title: '接口文档',icon: 'DocumentCopy',roles: ['sys:document']}},{path: '/systemCode',component: '/system/config/code',name: 'systemCode',meta: {title: '日志管理',icon: 'Operation',roles: ['sys:systemCode']}}]}
]export default [{url: '/mock/user/menuList',method: 'get',response: (req) => {console.log('对外暴露一个数组：数组含2个接口', req.headers['csg-token'])return {code: 200,data: menuList,msg: '成功'}}// const token = req.headers.token// const checkUser = createUserList()// if (!token) {//   return { code: 201, data: { msg: '获取接口信息失败' } }// }// return { code: 200, data: { checkUser } }}
] 

vite.config.ts文件配置

import { viteMockServe } from 'vite-plugin-mock'
const viteConfig = defineConfig(({ mode }) => {//添加第三个参数空字符串时 '' ,会在env中包含所有环境变量；反之，只包含.env文件中配置的环境变量const env = loadEnv(mode, process.cwd())return {plugins: [vue(),viteMockServe({mockPath: './mock', // 解析刚刚 user.ts 的位置enable: true // 是否开启 Mock 服务})],}
})
export default viteConfig

接口使用(我这里是写的axios封装,你们根据自己当前需求)

export function getMenuList() {return request({url: '/mock/user/menuList',method: 'get'})
}

页面调用

import { userStore } from '@/store/user'const ustore = userStore()ustore.getMenuList()