vue-cli中的 proxy 代理配置的方法

需求是项目中一个2大类模块，一类模块请求A域名；另一类模块请求B域名

参考地址：

配置参考 | Vue CLI

 DevServer | webpack 中文文档

// 如果后台给的地址是一样的，都以Api开头，可以像下面这样写，/testApi和/api是为了区分
 proxy: {
      '/testApi': {
        target: 'https://baidu.cn', // 服务器地址
        changeOrigin: true, // 是否改变源地址
        ws: true, // 是否支持websocket协议
        pathRewrite: { // 路径重写-------''覆盖/testApi这个路径
          '^/testApi': ''
        }
      },
      '/api': {
        target: 'https://blog.csdn.net',
        changeOrigin: true,
        ws: true
      }
}

// 如果后台给的开头地址不一样f分别为api1和api2，就直接配置就可以
 proxy: {
      '/api1': {
        target: 'https://baidu.cn', // 服务器地址
        changeOrigin: true, // 是否改变源地址
        ws: true, // 是否支持websocket协议
        pathRewrite: { // 路径重写
          '^/testApi': ''
        }
      },
      '/api2': {
        target: 'https://https://blog.csdn.net',
        changeOrigin: true,
        ws: true
      }
}

配置完代理，报404的时候要先重启一下vue.config.js,如果还有问题，vuecli3多个代理跨域，第二个报404，可以这样试一下

proxy: {
  '^/BaseDataService': {
    target: process.env.VUE_APP_BD_API,
    changeOrigin: true,
    pathRewrite: {
      '^/BaseDataService': '',
    },
    logLevel: 'debug',
  },
  '^/api': {
    target: process.env.VUE_APP_BASE_API,
    changeOrigin: true,
    logLevel: 'debug',
  }
}

实例：