VUE中mock模拟数据和后台接口同时使用，已测试可用

前端开发经常会遇到页面已经开发好但是数据接口,还未处理好的情况，但是这个时候又有部分接口已经开发好，此时需要使用mock模拟服务端开发同学未完成的接口来调试页面网上查了查很多方法，但是都没有测试通，仍然连不上mock接口，最终找到了如下方案解决这个问题。

网上有说的是将需要跳转到mock的接口代理到target: `http://localhost:${port}/mock`, 然后before: require('./mock/mock-server.js'),,after: require('./mock/mock-server.js'), 都试了都不行。

所以我采用了下面的方法：

修改vue.config.js中devServer

devServer: {
    port: port, 
    open: true,
    host: '0.0.0.0', 
    overlay: {
      warnings: false,
      errors: true
    },
    before: require('./mock/mock-server.js'),
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'http://127.0.0.1:5011/',
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    }
  }

解决思路就是如果mock中存在这个接口，那么就会请求转发到mock，如果mock中没有这个接口，那才会跳转到自己后台的接口'http://127.0.0.1:5011/',
这种方法弊端就是：如果后端同学开发完成一个接口的话，你就需要把mock中自己写的模拟接口给注释掉，这样才会请求到真正的后端接口，容易造成大量被注释的代码；

目前是还没有找到好的解决方案，先这样用这种笨方法解决。
各位大佬有什么好的方案可以分享一下，学习学习~

当前版本：

image.png