使用mockjs模拟数据

官方文档 Home

安装mockjs

yarn add mockjs -S 或 npm i mockjs -D

安装vite-plugin-mock

npm i vite-plugin-mock -D

配置环境

在vite.config.ts进行个人配置

import { defineConfig } from "vite";
import { viteMockServe } from "vite-plugin-mock";

import requireTransform from 'vite-plugin-require-transform';

import vue from "@vitejs/plugin-vue";

// 引入resolve
import { resolve } from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({
      mockPath: "./src/mock/", // 设置模拟数据的存储文件夹
      supportTs: true, // 是否读取ts文件模块
      logger: true, //  是否在控制台显示请求日志
      localEnabled:true, //设置是否启用本地mock文件
      prodEnabled: true, //设置打包是否启用 mock 功能
    }),
    requireTransform({
      fileRegex: /.ts$|.vue$/
    }),
  ],
  resolve: {
    // 设置路径别名
    alias: {
      "@": resolve(__dirname, "./src"),
      "*": resolve(""),
    },
  },
});

创建文件夹

import type { MockMethod } from "vite-plugin-mock";
export default [
  {
    url: "/api/getUserInfo", // 注意，这里只能是string格式
    method: "get",
    response: () => {
      return {
        menusList: [
          {
            id: "1",
            title: "南辰",
            subMenuList: [
              {
                id: "11",
                title: "南",
                path: "/user/nan",
              },
              {
                id: "12",
                title: "小",
                path: "/user/xiao",
              },
              {
                id: "13",
                title: "辰",
                path: "/user/chen",
              },
            ],
          },
          {
            id: "2",
            title: "希",
            subMenuList: [
              {
                id: "21",
                title: "玩游戏",
                path: "/user/play",
              },
            ],
          },
        ],
      };
    },
  },
] as MockMethod[]; // 这里其实就是定义数据格式的，不了解的同学可以参考typescript的官方文档