vue3笔记（10-2）mock数据-vite

本篇是上一篇的另一种实现，框架更新后，使用vite+pinia，自然mock数据也要跟上。基于vite-plugin-mock实现开发。

步骤

1. 安装vite-plugin-mock包

npm i vite-plugin-mock

2. 在vite.config.ts中添加插件

import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig(({ mode }: ConfigEnv) => {
  return {
    plugins: [
      // 配置mock
      viteMockServe({
        mockPath: 'src/mock',
        localEnabled: true,
      }),
    ],
  }
})

3. 新建mock文件夹

mock/index.ts中存放mock的API列表

import { MockMethod } from 'vite-plugin-mock'

// 数组中存放多个请求
const mockList: MockMethod[] = [
  {
    url: '/mock/menu',
    method: 'get', // 请求方式
    statusCode: 200, // 返回的http状态码
    response: (opt) => {
      // opt 对象中包含 url  body  query  headers
      return {
        // 返回的结果集
        status: 200,
        msg: '登录成功',
        data: [
          {
            path: '/dash3',
            title: 'dash3',
            component: 'BasicLayout',
            meta: {
              title: '动态管理3',
              icon: 'userm',
              hidden: false,
              level: 1
            },
            children: [
              {
                title: 'dash3',
                path: '/dash3',
                component: 'test',
                fold: 'home'
              }
            ]
          }
        ]
      }
    }
  }
]
export default mockList

4. 写请求

api/user.ts

export const getUserRoutes = (params: any) => request.get({ url: '/mock/menu', params })

5. 开启

npm run dev