@gc082/mock v1.0.3-beta

介绍

基于 http-proxy-middleware的mock工具

使用示例

1. npm i -D cross-env

2. package.json中新增启动命令:

  ....
  "scripts": {
    "dev": "dog-cli start",
    "dev:proxy": "vue-cli-service serve",
+   "dev:mock": "cross-env MOCK=true vue-cli-service serve",
     ...
     ...
  },
  ....

3. 在webpack配置文件中添加代理配置

// vue.config.js 或者build/webpack.dev.conf.js 中
const { addOnProxyRes, use } = require('@gc082/mock')
const isMock = process.env.MOCK

module.exports = merge(baseConfig, {
    ....

    devServer: {
        ...
        ...
        // 添加如下代码
+        before: function (app, server, compiler) {
+            if (isMock) {
+                use('代理地址1', app)
+                use('代理地址2', app)
+            }
+        },
        proxy: [
            {
                context: [
                    '代理地址1',
                    '代理地址2'
                    ....
                    ....
                ],
+                ...addOnProxyRes({
+                target: 'http://xxxx.com.cn', // 目标地址
+                changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
+                })
            }
        ]
        
        ....
    },
});

效果&原理

• 启动服务正调用接口时会将接口返回的数据写入工作目录data文件夹中，文件路径按接口地址路径拼接
• 启动mock服务时，会对所有（代理的）接口请求做拦截，读取data中对应的数据返回，如果读取不到则会去发起真正的请求到代理服务器