vite mock 數據插件：vite-plugin-easy-mock

vite-plugin-easy-mock

前言

開發項目時想要有個很容易mock本地數據的插件，只需要 vue.config.js 或 vite.config.js 中加載，然后按照規則即可使用mock數據，開啟本地服務器則自動代理mock數據（可根據環境判斷是否需要加載該插件），不需要開啟額外的服務器

功能

攔截接口，重寫返回，代理到本地 mock 數據

安裝

yarn add vite-plugin-easy-mock --dev
# or
npm i vite-plugin-easy-mock --save-dev

使用

vite.config.js 中使用插件

import { defineConfig } from 'vite'
import viteMock from 'vite-plugin-easy-mock'

export default defineConfig({
  plugins: [
    viteMock()
  ]
})

vue.config.js 中使用

const { useMiddleWare } = require('vite-plugin-easy-mock')

module.exports = {
  devServer: {
    before (app) {
      // 使用mock中間件
      app.use(useMiddleWare())
    }
  },
}

根目錄下新建 mock 文件夾，新建文件夾和 json 或者 js 文件

文件夾和文件名配合就能 mock 本地 /user/getAuthList 接口，json 和 js 寫法如下：

mock/user/getAuthList.json

{
  "success": true,
  "desc": null,
  "data": []
}

mock/user/getAuthList.js

module.export = () => {
  return {
    success: true,
    desc: null,
    data: []
  }
}

說明

原理是對請求進行攔截，判斷是否是ajax請求或者文件上傳請求，如果是則走mock
如果能再本地mock文件夾中找到路徑對應文件就會返回該文件里的json數據
如果找不到路徑則返回{success: false, desc: '未找到mock路由'}

插件地址
源碼地址