Vue3——集成mock 模拟数据生成器

• 安装依赖

npm install -D mockjs vite-plugin-mock@2.9.6

在 vite.config.js 文件中引入并配置 vite-plugin-mock 插件

import { UserConfigExport, ConfigEnv } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'
export default ({ command })=> {
  return {
    plugins: [
      vue(),
      viteMockServe({
        mockPath: "mock", // 指定mock文件的路径
        localEnabled: command === "serve", // 根据命令行参数决定是否开启本地存储
      }),
    ],
  }
}

在根目录创建 mock 文件夹:去创建我们需要 mock 数据与接口！！！

在 mock 文件夹内部创建一个 user.ts 文件

import { mock } from "mockjs";

// 定义一个mock接口，返回用户列表
export default [
  {
    url: "/dev-api/user/list",
    method: "get",
    response: () => {
      return {
        code: 0,
        data: mock({
          "list|10": [
            {
              id: "@id",
              name: "@name",
              age: "@integer(18, 60)",
              email: "@email",
              avatar: "@image",
            },
          ],
        }),
      };
    },
  },
];