vite-plugin-mock

安装

yarn add mockjs vite-plugin-mock --dev

编写 Mock 用例

• mock\_util.ts：里面封装的是数据请求结构类型。
• mock\_createProductionServer.ts：用于配置生产环境动态 Mock 的 js 文件，文档中有说。
• 其他的：都是 Mock 用例。每一个js、ts。都要默认导出一个MockMethod类型的数组。每一项MockMethod就是拦截的一个方法。MockMethod的response对应方法的return将会被Mock实例处理。也就是说，你可以在return的对象中使用Mock 规则

配置 Mock

build\plugin\mock.ts：

/**
 * Mock plugin for development and production.
 * https://github.com/anncwb/vite-plugin-mock
 */
import { viteMockServe } from 'vite-plugin-mock';
export function configMockPlugin(isBuild: boolean) {
  return viteMockServe({
    // ↓忽略以_开头的文件
    ignore: /^\_/,
    // ↓解析根目录下的mock文件夹
    mockPath: 'mock',
    localEnabled: !isBuild,
    prodEnabled: isBuild,
    injectCode: `
      import { setupProdMockServer } from '../mock/_createProductionServer';
      setupProdMockServer();
      `,
  });
}

配置进 Vite

build\plugin\index.ts：

// ...
import { configMockPlugin } from './mock';
export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
  // ...
  // vite-plugin-mock
  VITE_USE_MOCK && vitePlugins.push(configMockPlugin(isBuild));
  return vitePlugins;
}