前端开发经常会遇到页面已经开发好但是数据接口,还未处理好的情况，但是这个时候又有部分接口已经开发好，此时需要使用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
