使用vue项目配置多个代理的注意点

更新时间：2021年07月08日 10:18:46 作者：hjb2722404

这篇文章主要介绍了使用vue项目配置多个代理的注意点，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

在Vue项目的开发过程中,为了本地调试方便，我们通常会在 vue.config.js 中配置 devServer 来在本地启动一个服务器，在这个选项中，我们会配置proxy 属性来将指向到本地的请求（例如： /api/action）代理到后端的开发服务器上（例如： http://xxx.xxx.xxx/api/action）

devServer: {
        port: 8081,
        proxy: {
            '/api/action': {
                target: 'http://192.168.200.106:81',
                changeOrigin: true,
                ws: true,
                secure: false
            }
        }
    },
```

在这个配置中，要注意以下两点：

接口地址有重叠地址时，将匹配度低的放在后面。

例如：

* 将 / 匹配到 192.191.1.1;
* 将 /api 匹配到 192.191.1.2
* 将 /api/action 匹配到 192.191.1.3

如果我们像下面一样书写：

proxy: {
            '/': {
                target: 'http://192.191.1.1',
                changeOrigin: true,
                ws: true,
                secure: false
            },
    '/api': {
                target: 'http://192.191.1.2',
                changeOrigin: true,
                ws: true,
                secure: false
            },
    '/api/action': {
                target: 'http://192.191.1.3',
                changeOrigin: true,
                ws: true,
                secure: false
            }
        }

那么所有到/, /api和 /api/action 的请求将全部被代理到 192.191.1.1 上面去

原因是这里的匹配实际上是一个正则匹配的过程，当我们请求 /api 时，首先读取到了配置项中的第一个，拿配置中的 / 去匹配请求中的 /api ，发现请求的/api 中包含配置项/, 匹配成功，直接将请求代理到了 192.191.1.1 上面去，对/api/action的匹配也同理。

也就是说，它的匹配规则是：拿配置项中的地址去匹配请求中的地址，如果请求中的地址中包含配置中的地址，则匹配成功，否则，拿下一个配置项继续匹配。

所以，配置中的地址与请求地址中匹配的字符越少，匹配度越低。上例中配置中的地址（/）与请求地址（/api）只有一个字符是匹配的，所以匹配度低。

所以我们正确的写法应该是：

proxy: {
            '/api/action': {
                target: 'http://192.191.1.3',
                changeOrigin: true,
                ws: true,
                secure: false
            },
    '/api': {
                target: 'http://192.191.1.2',
                changeOrigin: true,
                ws: true,
                secure: false
            },
    '/': {
                target: 'http://192.191.1.1',
                changeOrigin: true,
                ws: true,
                secure: false
            }
        }

这样到三个地址的请求就都可以正确代理到相应的地址去了

多个地址代理同一个target 时，可进行合并

在实际应用中，由于后端采用微服务模式开发，在开发阶段，我们可能会将不同的服务代理到不同的地址上，当服务很多时，我们代理的数量也就很多：

proxy: {
  		'/api/action': {
                target: 'http://192.191.1.3',
                changeOrigin: true,
                ws: true,
                secure: false
            },
              '/api/action2': {
                target: 'http://192.191.1.4',
                changeOrigin: true,
                ws: true,
                secure: false
            },
              '/api/action3': {
                target: 'http://192.191.1.3',
                changeOrigin: true,
                ws: true,
                secure: false
            },
              '/api/action4': {
                target: 'http://192.191.1.4',
                changeOrigin: true,
                ws: true,
                secure: false
            },
              '/api/action5': {
                target: 'http://192.191.1.5',
                changeOrigin: true,
                ws: true,
                secure: false
            },
              '/api/action6': {
                target: 'http://192.191.1.6',
                changeOrigin: true,
                ws: true,
                secure: false
            },
              '/api/action7': {
                target: 'http://192.191.1.5',
                changeOrigin: true,
                ws: true,
                secure: false
            },
              '/api/action8': {
                target: 'http://192.191.1.6',
                changeOrigin: true,
                ws: true,
                secure: false
            },
              '/api/action9': {
                target: 'http://192.191.1.7',
                changeOrigin: true,
                ws: true,
                secure: false
            },
			 '/api': {
                target: 'http://192.191.1.2',
                changeOrigin: true,
                ws: true,
                secure: false
            },
			 '/': {
                target: 'http://192.191.1.1',
                changeOrigin: true,
                ws: true,
                secure: false
            },              
        }

当配置的代理数量超过十个时，开发环境编译打包时会报以下错误：

在这里插入图片描述

为了解决报错，也同时减少代码体积，我们可以对具有同一个target的配置项进行合并，由上文我们可知，这里其实是一个正则匹配的过程，那我们就可以利用正则语法将他们进行合并：

proxy: {
  		'/api/action|/api/action3': {
                target: 'http://192.191.1.3',
                changeOrigin: true,
                ws: true,
                secure: false
            },
              '/api/action2|/api/action4'': {
                target: 'http://192.191.1.4',
                changeOrigin: true,
                ws: true,
                secure: false
            },
             
              '/api/action5|/api/action7': {
                target: 'http://192.191.1.5',
                changeOrigin: true,
                ws: true,
                secure: false
            },
              '/api/action6|/api/action8': {
                target: 'http://192.191.1.6',
                changeOrigin: true,
                ws: true,
                secure: false
            },
              '/api/action9': {
                target: 'http://192.191.1.7',
                changeOrigin: true,
                ws: true,
                secure: false
            },
			 '/api': {
                target: 'http://192.191.1.2',
                changeOrigin: true,
                ws: true,
                secure: false
            },
			 '/': {
                target: 'http://192.191.1.1',
                changeOrigin: true,
                ws: true,
                secure: false
            },              
        }

当然，在正式部署的时候，还是需要后端去做统一代理。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue的基本知识你都了解吗
这篇文章主要为大家详细介绍了Vue的基本知识，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
vue在手机中通过本机IP地址访问webApp的方法
这篇文章主要介绍了vue在手机中通过本机IP地址访问webApp的方法,需要的朋友可以参考下
2018-08-08
Vue2和Vue3在v-for遍历时ref获取dom节点的区别及说明
这篇文章主要介绍了Vue2和Vue3在v-for遍历时ref获取dom节点的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
Element UI 上传组件实现文件上传并附带额外参数功能
在使用 ElementUI 的上传组件 el-upload 实现文件上传功能时,如果单文件上传是比较简单的,但是在实际需求中,往往会在上传文件时伴随着一些其他参数,怎么操作呢,下面通过示例代码讲解感兴趣的朋友一起看看吧
2023-08-08
fetch网络请求封装示例详解
这篇文章主要介绍了fetch网络请求封装的示例内容详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2021-11-11
vue多页面项目开发实战指南
一般我们的vue项目都是单页面的,其实因为vue在工程化开发的时候依赖了webpack,webpack帮我们将所有的资源整合到一起而形成一个单页面,下面这篇文章主要给大家介绍了关于vue多页面项目开发的相关资料,需要的朋友可以参考下
2022-01-01
vue 利用路由守卫判断是否登录的方法
今天小编就为大家分享一篇vue 利用路由守卫判断是否登录的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vxe-table 实现按回车键自动新增一行(示例代码)
本文通过示例代码介绍了vxe-table新版本中实现回车自动换行功能的方法,通过设置keyboard-config.isLastEnterAppendRow参数可以控制是否开启该功能,当回车键在最后一行按下时,会自动新增一行,并将光标移动到新行,代码简单易懂,感兴趣的朋友跟随小编一起看看吧
2024-12-12
vue3使用vue3-print-nb实现区域打印功能
这篇文章主要给大家介绍了关于vue3使用vue3-print-nb实现区域打印功能的相关资料,在日常操作中,相信很多人在Vue怎么用插件实现打印功能问题上存在疑惑,需要的朋友可以参考下
2023-07-07
vue 导入js中的两种方法(示例详解)
这篇文章主要介绍了vue 导入js中的方法,本文通过两种方法结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-07-07