安装插件

要在vite项目中使用mock，需要安装两个插件 mockjs和vite-plugin-mock

配置解释

在vite.config.ts中增加viteMock的配置： 首先： import { viteMockServe } from "vite-plugin-mock";

然后在plugins中增加配置，假定不会在生产环境中使用mock

viteMockServe({
    // 解析mock文件夹忽略的文件，此处表示为_开头的文件。
    ignore: /^\_/,
    // mock文件所在路径，当前配置为根路径下mock文件夹
    mockPath: "mock", 
    // 设置是否启用本地mock，设置为 `false` 将禁用 mock 功能
    localEnabled: command === "serve", //此处 command为 vite defineConfig 方法传入参数
    prodEnabled: command !== "serve", // 设置打包即生产环境是否启用 mock 功能
    logger: true, //是否控制台显示日志
    supportTs: true, // 打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件。
    watchFiles: true, // 监视文件更改
    /** 如果生产环境开启了 mock 功能,即`prodEnabled=true`.
    则该代码会被注入到`injectFile`配置对应的文件的底部,不配置则默认为`main.{ts,js}`,
    这样做的好处是,可以动态控制生产环境是否开启 mock 且在没有开启的时候 mock.js 不会被打包。
    如果代码直接写在`main.ts`内，则不管有没有开启,最终的打包都会包含`mock.js`，
    验证这个代码是否正确的方法为把这个代码自行加到main.ts最后，然后看看是否执行setupProdMockServer方法。*/
    injectCode: `
        import { setupProdMockServer } from '../mock/_createProductionServer';
        setupProdMockServer();
        `, 
    }),

配置说明请参照下面地址： vite-plugin-mock/README.zh_CN.md at main · vbenjs/vite-plugin-mock (github.com)

编写代码

目录结构：

如果不需要在生产环境中打开mock，则不用写_createProductionServer文件。

• menu/index.ts:

import { MockMethod } from "vite-plugin-mock";

const mock = true;

const mockLists = [
  {
    url: "/api/menu-info",
    method: "post",
    response: ({ query }) => {
      return {
        code: 0,
        data: {
            name:"test"
        },
      };
    },
  }
] as MockMethod[];

const a = mock ? mockLists : ([] as MockMethod[]);

export default a;

如果不想打开menu模块的mock接口，则可以修改此处的const mock = false

• _createProductionServer：

// 用于生产环境加载mock，目前用不上，不会运行
import { createProdMockServer } from "vite-plugin-mock/es/createProdMockServer";

import user from "./user/index";

import menu from "./menu/index"

export const mockModules = [...user,...menu]

export function setupProdMockServer() {
  createProdMockServer(mockModules);
}

在使用mock的时候需要注意一点在mock文件夹下加载的mock文件一定要使用export default ，并且导出值类型一定是MockMethod[]。