vue配置多个反向代理,vue配置代理只在开发环境使用
本文主要介绍了用vue项目配置多个代理的注意事项，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
在Vue项目开发过程中，为了方便本地调试，我们通常会在vue.config.js中配置devServer，在本地启动一个服务器。在此选项中，我们将配置代理属性以将本地请求(例如/api/action)代理到后端开发服务器(例如http://xxx.xxx.xxx/api/action)。
devServer: {
端口：8081，
代理服务器：{
/api/action: {
目标：“http://192.168.200.106:81”，
changeOrigin:真的，
ws:没错，
安全：假
}
}
},
```
在这个配置中，要注意以下两点：
接口地址有重叠地址时，将匹配度低的放在后面。
例如：
*匹配/匹配到192.191.1.1；
*匹配/api到192.191.1.2
*匹配/API/192.191.1.3行动
如果我们写如下：
代理服务器：{
/: {
目标：“http://192.191.1.1”，
changeOrigin:真的，
ws:没错，
安全：假
},
/api: {
目标：“http://192.191.1.2”，
changeOrigin:真的，
ws:没错，
安全：假
},
/api/action: {
目标：“http://192.191.1.3”，
changeOrigin:真的，
ws:没错，
安全：假
}
}
那么对/、/api和/api/action的所有请求都将被发送到192.191.1.1。
原因是这里的匹配实际上是一个常规的匹配过程。当我们请求/api时，首先读取第一个配置项，从配置中取出/api，发现请求的/api包含配置项/。匹配成功后，我们直接将请求代理给192.191.1.1，对于/api/action的匹配也是如此。
也就是说，它的匹配规则是：将请求中的地址与配置项中的地址进行匹配。如果请求中的地址包含配置中的地址，则匹配成功，否则，取下一个配置项继续匹配。
因此，配置地址中与请求地址匹配的字符越少，匹配度就越低。在上面的例子中，配置中的地址(/)与请求地址(/api)只匹配了一个字符，所以匹配度较低。
所以我们正确的写法应该是：
代理服务器：{
/api/action: {
目标：“http://192.191.1.3”，
changeOrigin:真的，
ws:没错，
安全：假
},
/api: {
目标：“http://192.191.1.2”，
changeOrigin:真的，
ws:没错，
安全：假
},
/: {
目标：“http://192.191.1.1”，
changeOrigin:真的，
ws:没错，
安全：假
}
}
这样，对三个地址的所有请求都可以正确地表示到相应的地址。
多个地址代理同一个target 时，可进行合并
在实际应用中，由于后端是以微服务模式开发的，所以在开发阶段，我们可能会将不同的服务代理到不同的地址。当有许多服务时，我们的代理数量也很大：
代理服务器：{
/api/action: {
目标：“http://192.191.1.3”，
changeOrigin:真的，
ws:没错，
安全：假
},
/api/action2 :
目标：“http://192.191.1.4”，
changeOrigin:真的，
ws:没错，
安全：假
},
/api/action3 :
目标：“http://192.191.1.3”，
changeOrigin:真的，
ws:没错，
安全：假
},
/api/action4 :
目标：“http://192.191.1.4”，
更改来源：真的，
ws:没错，
安全：假
},
/api/action5 :
目标："http://192.191.1.5",
更改来源：真的，
ws:没错，
安全：假
},
/api/action6 :
目标："http://192.191.1.6",
更改来源：真的，
ws:没错，
安全：假
},
/api/action7 :
目标："http://192.191.1.5",
更改来源：真的，
ws:没错，
安全：假
},
/api/action8 :
目标："http://192.191.1.6",
更改来源：真的，
ws:没错，
安全：假
},
/api/action9 :
目标："http://192.191.1.7",
更改来源：真的，
ws:没错，
安全：假
},
/api: {
目标："http://192.191.1.2",
更改来源：真的，
ws:没错，
安全：假
},
/: {
目标："http://192.191.1.1",
更改来源：真的，
ws:没错，
安全：假
},
}
当配置的代理数量超过十个时，开发环境编译打包时会报以下错误：
为了解决报错，也同时减少代码体积，我们可以对具有同一个目标的配置项进行合并，由上文我们可知，这里其实是一个正则匹配的过程，那我们就可以利用正则语法将他们进行合并：
代理服务器：{
/api/action/api/action3 :
目标："http://192.191.1.3",
更改来源：真的，
ws:没错，
安全：假
},
/api/action2/api/action4 " ":
目标："http://192.191.1.4",
更改来源：真的，
ws:没错，
安全：假
},
/api/action5/api/action7 :
目标："http://192.191.1.5",
更改来源：真的，
ws:没错，
安全：假
},
/api/action6/api/action8 :
目标："http://192.191.1.6",
更改来源：真的，
ws:没错，
安全：假
},
/api/action9 :
目标："http://192.191.1.7",
更改来源：真的，
ws:没错，
安全：假
},
/api: {
目标："http://192.191.1.2",
更改来源：真的，
ws:没错，
安全：假
},
/: {
目标："http://192.191.1.1",
更改来源：真的，
ws:没错，
安全：假
},
}
当然，在正式部署的时候，还是需要后端去做统一代理。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。