vue/cli 3 配置多个代理服务器

1. 在与src同级目录新建vue.config.js
2. vue.config.js

   module.exports = {
       publicPath: '/',
     
       outputDir: 'dist',
     
       assetsDir: 'static',
     
       filenameHashing: true,
     
       devServer: {
         open: true,  // 自动打开浏览器
     
         host: '127.0.0.1',
     
         port: 8081,
     
         https: false,
     
         hotOnly: false,
   
         disableHostCheck: true,
     
         proxy: {
             "/api": {
                 target: 'http://xxxxxxx', // 这个地址结尾我原本加了一个‘/’,然后一直报404，去掉就好了
                 changeOrigin: true,
                 pathRewrite: {
                     '^/api': '/'
                 }
             },
             '/bpi': {
                 target: "http://xxxxxx",
                 changeOrigin: true,
                 pathRewrite: {
                   '^/bpi': '/'
               }
             },
             '/cpi': {
                 target: 'http://',
                 changeOrigin: true,
                 pathRewrite: {
                   '^/cpi': '/'
               }
             }
         },
     
         before: app => {
         }
       },
       // 构建时开启多进程处理 babel 编译
       parallel: require('os').cpus().length > 1,
     
       // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
       pwa: {},
     
       // 第三方插件配置
       pluginOptions: {}
     };

   因为数据在不同的服务器，所以配置proxy 方便拿取数据

3. 在main.js里面，设置baseURL

axios.defaults.baseURL = '';

Vue.prototype.$http=axios;  这里根据实际需要设置请求头之类的

使用时

this.$http({
    method: 'post',
    url: '/api/xxx/xxx',
    data: params
}).then(res => {
    console.log(res.data)
}).catch(error => {
    console.log(error)
})

4.重启项目，一定要重启项目！！