安裝以下命令

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()