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的配置。

5.不同环境下的mock配置

1. vite.config.js中添加配置

   // vite.config.js
   import vue from "@vitejs/plugin-vue";
   import { viteMockServe } from "vite-plugin-mock";
   import { defineConfig } from "vite";
   
   const localEnabled = process.env.USE_MOCK || false;
   const prodEnabled = process.env.USE_CHUNK_MOCK || false;
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [
       vue(),
       viteMockServe({
         mockPath: "./src/server/mock", //mock文件地址
         localEnabled: localEnabled, // 开发打包开关
         prodEnabled: prodEnabled, // 生产打包开关
         // 这样可以控制关闭mock的时候不让mock打包到最终代码内
         injectCode: `
           import { setupProdMockServer } from './mockProdServer';
           setupProdMockServer();
         `,
         logger: false, //是否在控制台显示请求日志
         supportTs: false //打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件
       })
     ]
   });
   

2. src文件夹下，添加文件mockProdServer.js

   import { createProdMockServer } from "vite-plugin-mock/es/createProdMockServer";
   import testMock from "./server/mock/test";
   
   export const mockModules = [...testMock];
   
   export function setupProdMockServer() {
     createProdMockServer(mockModules);
   }
   

3. package.json添加相关命令

   // package.json 
   "scripts": {
       "dev": "vite",
       "build": "vite build",
       "dev:mock": "cross-env USE_MOCK=true vite",
       "build:mock":"cross-env USE_CHUNK_MOCK=true vite build"
     },