vite/vue mock 數(shù)據(jù)插件:vite-plugin-easy-mock
vite-plugin-easy-mock
前言
開發(fā)項目時想要有個很容易mock本地數(shù)據(jù)的插件,只需要 vue.config.js 或 vite.config.js 中加載,然后按照規(guī)則即可使用mock數(shù)據(jù),開啟本地服務器則自動代理mock數(shù)據(jù)(可根據(jù)環(huán)境判斷是否需要加載該插件),不需要開啟額外的服務器
功能
攔截接口,重寫返回,代理到本地 mock 數(shù)據(jù)
安裝
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數(shù)據(jù)
如果找不到路徑則返回{success: false, desc: '未找到mock路由'}

浙公網(wǎng)安備 33010602011771號