问题描述
在使用 vue-cli3 创建项目时，如果在 vue.config.js 中配置了代理，那么在开发环境下，每次修改代理配置后都需要重启项目才能生效，这样就会造成开发效率的降低，因此需要解决这个问题。
vue 的代理是通过 http-proxy-middleware 实现的，它的原理是在开发环境下，通过 webpack-dev-server 启动一个 express 服务器，然后通过 http-proxy-middleware 将请求转发到目标服务器，因此，我们只需要在开发环境下，将 http-proxy-middleware 的配置写入到 webpack-dev-server 的配置中即可。
旧方案
在 vue.config.js 中配置如下代码：
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
'/message': {
target: 'http://localhost:6000',
changeOrigin: true,
pathRewrite: {
'^/message': ''
}
}
}
}这样就可以在开发环境下，通过/api 访问 3000 端口的服务，通过/message 访问 6000 端口的服务。但是，每次修改代理配置后都需要重启项目才能生效。
新方案
我们使用http-proxy-middleware的router属性，它的优先级高于target，因此，我们可以通过router属性来实现动态代理，具体改造如下：
新的目录结构如下：
...
...
+ ├──proxy.js
+ ├──proxy-config.js
├──vue.config.js我们将proxy.js和proxy-config.js放在根目录下，然后在 vue.config.js 中引入 proxy.js，具体代码如下：
vue.config.js
const proxy = require('./proxy')
devServer: {
proxy: proxy
}proxy.js
const fs = require('fs')
function looseJsonParse(obj) {
return Function('"use strict";return (' + obj + ')')()
}
let currentProxy = ''
function getUrl(key) {
const router = fs.readFileSync('./proxy-config.js', 'utf8')
const a = router.indexOf('{')
const b = router.lastIndexOf('}')
const proxy = looseJsonParse(router.substring(a, b + 1))
if (currentProxy !== proxy[key]) {
console.log(`${key} proxy changed =>`, proxy[key])
}
currentProxy = proxy[key]
return proxy[key]
}
module.exports = {
'/api': {
target: 'target',// 这个字段必须有
router: () => getUrl('api'),
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
'/message': {
target: 'target',
router: () => getUrl('message'),
changeOrigin: true,
pathRewrite: {
'^/message': ''
}
}
}proxy-config.js
/**
* 代理配置，修改完代理后，不需要重启项目，直接刷新浏览器即可
* 不使用json文件的原因是，json文件无法注释，不利于维护
* https://github.com/chimurai/http-proxy-middleware#router-objectfunction
*/
const proxy = {
/**
* api
*/
api: 'http://localhost:3000', //dev
// api: 'http://localhost:3001', //sit
/**
* message
*/
message: 'http://localhost:6000', //dev
// message: 'http://localhost:6001', //sit
}
测试
启动项目，然后在proxy-config.js修改代理配置，不需要重启项目，直接刷新浏览器即可。
来自：https://segmentfault.com/a/1190000043605801
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！