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

插件地址
源码地址