Vue脚手架配置代理

 1 Vue脚手架配置代理
 2 方法一:
 3   在vue.config.js中添加如下配置
 4     module.exports = defineConfig({
 5       devServer:{
 6         proxy: "http://localhost:5000"
 7       }
 8     })
 9   说明:
10     1.优点:配置简单,请求资源时直接发送给前端(8080)即可。
11     2.缺点:不能配置多个代理,不能灵活的控制请求是否走代理。
12     3.工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求就会转发给服务器(优先匹配前端资源)
13 方法二:
14     编写vue.config.js配置具体代理规则:
15     module.exports = defineConfig({
16       devServer:{
17         proxy: {
18           'api1':{ // 匹配所有以'/api1'开头的请求路劲
19             target: 'http://localhost:5000', // 代理目标的基础路劲
20             changeOrigin: true, // 设置为true时,服务器收到的请求头中的host为target维护的url主机加端口
21                                 // 设置为false时,服务器收到的请求头中的host为当前主机加当前访问的端口
22                                 // 默认为true
23             pathRwrite:{'^/api1':''} // 若请求地址是:http://localhost:8080/api1/student
24                                      // 代理后的请求地址是:http://localhost:8080/student
25                                      // 会吧'/api1'替换成'',
26                                      // '^/api1'是正则
27           },
28           'api2':{ // 匹配所有以'/api2'开头的请求路劲
29             target: 'http://localhost:5000', // 代理目标的基础路劲
30             changeOrigin: true,
31             pathRwrite:{'^/api1':''}
32           }
33         }
34       }
35     })
36     说明:
37       1.优点:可以配置多个代理,且可以灵活的控制请求是否走代理
38       2.缺点:配置略微繁琐,请求资源时必须加前缀

 

posted @ 2022-06-16 17:17  看一百次夜空里的深蓝  阅读(759)  评论(0编辑  收藏  举报