vite配置vite-plugin-mock

 

1.安裝vite-plugin-mock

npm i axios mockjs -s
npm i cross-env vite-plugin-mock -D

2.在根目錄創建mock文件夾，然后添加helloWorld.ts 文件（注意是ts文件，需要js的寫法自行轉換）

import { MockMethod } from 'vite-plugin-mock'

export default [
  {
    url: '/helloWorld', // 注意，這里只能是string格式
    method: 'get',
    response: ({ query }:any) => {
      console.log(query)
      return 'hello world'
    }
  }
] as MockMethod[] // 這里其實就是定義數據格式的，不了解的同學可以參考typescript的官方文檔

3.根目錄創建的mock文件夾目錄下創建index.ts文件

import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
import HelloWorld from './helloWorld' //引入定義的mock模擬接口

export function setupMock () {
  // 這個是用來注冊mock的，當在生產中使用mock時，很重要
  createProdMockServer([...HelloWorld])
}

4.vite.config.js文件配置

import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'

export default ({ command }) => {

  return {
    plugins: [
      vue(),
      viteMockServe({
        mockPath: 'mock', //解析根目錄下的mock文件夾
        localEnabled: command === 'serve', //開發打包開關
        prodEnabled: command !== 'serve' ,// 生產打包開關
        supportTs: true, // 打開后，可以讀取 ts 文件模塊。 請注意，打開后將無法監視.js 文件。
    //這樣可以控制關閉mock的時候不讓mock打包到最終代碼內
      injectCode: `
          import { setupMock } from '../mock';
          setupMock();
          `,
      }),
    ],
  }
}    

 

5.本地mock

刪除vite.config.js中viteMockServe配置下的injectCode和prodEnabled選項，或將prodMock = false
在main.js中添加

import { setupMock } from '../mock'; //mock
if(import.meta.env === 'development'){ //dev環境開啟mock
  setupMock()
}