vue3+ts+vite使用mock数据

安装以下命令

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