插件简介

此插件为 vue-cli 的扩展，用于在 vue-cli-service serve 命令运行的时候，通过向 @vue/cli-service 插件内部使用的 webpack-dev-server 启动的 server 添加中间件，来实现接口本地 mock 功能，同时此插件还支持后端导出的 swagger.json 文件自动解析为 mock 接口配置

插件安装

 npm install vue-cli-plugin-mock-hz

插件使用

根据 vue-cli 插件的运行原理，项目根目录的 package.json 文件中的 dependencies 或 devDependencies 中一定要有 vue-cli-plugin-mock-hz ，否则此插件不会生效； 确保项目根目录的 package.json 文件中的 dependencies 或 devDependencies 中有 vue-cli-plugin-mock-hz 后，在项目的 vue.config.js 文件中，引入如下代码：

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
    pluginOptions:  {
        mock: {
            // 插件具体配置请看后文
        }
    }
})

插件配置

插件配置如下

{
    mockPath: 'mock',  //接口的 mock 配置存放目录，默认为项目根目录下的 mock 目录
    watchFiles: true,  //是否监听 mock 文件变化，默认开启
    configPath: 'mock.config.js', //没有 mockPath 的时候的替补方式
    localEnabled: true, //是否启用 mock，运行 vue-cli-service serve --mode mock 命令的时候会自动启用，其余情况下 mock 功能自动关闭，用户指定的配置值优先级更高
    logger: true,
    enableSwagger: true, //是否开启 swagger.json 解析，默认是开启的
    swaggerPath: 'swagger.json' //默认的 swagger 接口文件名，此文件默认存放在 mockPath 目录下
}

示例项目 git 地址

vue2 示例[https://gitee.com/yali__home/vue2-demo.git]

一些其它问题

1. vue-cli 环境暂时不考虑支持 ts
2. vue-cli-service serve --mode mock 这种情况，可以自行在 .env 文件中配置传递给插件的配置设为 true，并赋值给 localEnabled 配置，暂时不扩展 --mock 命令
3. swagger 文件暂时不往生成 swagger.js方向去考虑(有其它问题，短期没空解决)，暂时采用和 mockData 一样的方式去读取其配置
4. swagger.json 无需刻意去重，毕竟它也是在 mockData 匹配不到之后才去匹配，所以还是保持了 mockData 的优先级
5. 监听 mock 目录下的文件变化不需要监听 swagger.json

疑问点

1. 为什么要 cleanCache
2. 后期考虑下扩展通过 --mock 方式开启 mock 的必要性