vue项目配置多个代理，使得前端能可以连接多个不同端口的接口

1、配置.env.development,，用于配置axios的二次封装

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '/'

2、配置axios的二次封装，设置baseurl为上图的VUE_APP_BASE_API

相当于baseurl设置成/

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

3、配置proxy代理（vue.config.js）

假设需要连接的两个接口分别为https://www.11111.com，https://www.2222.com，需要对这两个接口实现跨域（代理），配置如下

 proxy: { 
      '/production': {
        // 管理
        target: 'http://www.1111.com',
        pathRewrite: {
          '^/production': ''
        }
      },
      '/user': {
        // 用户登录
        target: 'http://www.2222.com',
        pathRewrite: {
          '^/user': ''
        }
      },

4、对地址发送请求

1、假设需要请求的完整地址为、

https://www.1111.com/admin/getinfo

所以我们需要将请求路径修改成一下形式

const requserinfo=()=>request({url:'production/admin/getinfo',method:'get'})

2、假设需要请求的完整地址为

https://www.2222.com/admin/getuser

可以将请求形式写成

const reqinfo=()=>request({url:'user/admin/getuser',method:'get'})

5、原理

当我们的请求为user/admin/getuser时，

先会加上baseurl，变成/user/admin/getuser

之后到proxy中寻找对应的配置代理，所以就会找到/user这个代理，

其中/user被重写成  空  ，使得请求路径变成 https://www.2222.com/admin/getuser

完成多个代理

6、总结

这是我在做项目时碰到的一个难题，因为没有写过大型的项目，所以对这些配置不太熟悉，经过总结得出这些方法，这只是我这个初学者想到最好的解决办法，如果有更好的办法，希望各位不吝赐教，指出错误