vite使用mock插件(vite-plugin-mock)记录

1. 依赖的安装

# 使用 npm 安装
npm install mockjs vite-plugin-mock -D
# 使用 yarn 安装
yarn add mockjs vite-plugin-mock -D

2. 在 vite.config.js 中使用vite-plugin-mock插件

import vue from "@vitejs/plugin-vue";
import { viteMockServe } from "vite-plugin-mock";
import { defineConfig } from "vite";

export default defineConfig({
    plugins: [
        vue(),
        viteMockServe({
            mockPath: "./src/server/mock",
            supportTs: false
        })
    ],
});

3. 添加mock目录及其文件

在 ./src/server/mock 目录中添加文件

// test.js 仅做示例: 通过GET请求返回一个名字数组
export default [
  {
    url: "/api/getUser",
    method: "get",
    response: () => {
      return {
        code: 200,
        message: "ok",
        data: ["tom", "jerry"]
      };
    }
  }
];

4. 使用

// ./src/server/api/login.js
export const Api_getUser = (params) => createAPI("/api/getUser", "get", params);

// home.vue
import { Api_getUser } from "@/server/api/login.js";
 Api_getUser({}).then((res) => {});

返回值：

{
    code: 0,
    data: {
        0: "tom",
        1: "jerry",
    },
    length: 2,
    message: "ok"
}

至此，我们就完成了mockjs的配置。