• 安装依赖
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",
            },
          ],
        }),
      };
    },
  },
];
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。