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

刺骨的言语ヽ痛彻心扉 2023-07-01 04:29 6阅读 0赞

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.重启项目，一定要重启项目！！