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路由'}