zoukankan      html  css  js  c++  java
  • 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路由'}

    插件地址
    源码地址

  • 相关阅读:
    FZU 2112 并查集、欧拉通路
    HDU 5686 斐波那契数列、Java求大数
    Codeforces 675C Money Transfers 思维题
    HDU 5687 字典树插入查找删除
    HDU 1532 最大流模板题
    HDU 5384 字典树、AC自动机
    山科第三届校赛总结
    HDU 2222 AC自动机模板题
    HDU 3911 线段树区间合并、异或取反操作
    CodeForces 615B Longtail Hedgehog
  • 原文地址:https://www.cnblogs.com/leiting/p/15125707.html
Copyright © 2011-2022 走看看