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"
     },