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

最新推荐文章于 2025-06-25 16:04:19 发布

清风十里过长街

最新推荐文章于 2025-06-25 16:04:19 发布

阅读量6.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue proxy

本文链接：https://blog.youkuaiyun.com/danby2/article/details/104037396

vue 专栏收录该内容

7 篇文章

订阅专栏

在Vue CLI 3项目中，为处理不同服务器的数据请求，可以在src同级目录创建vue.config.js进行代理配置。文章介绍了如何设置多个代理及在main.js中配置axios的baseURL，确保正确发送请求。在完成配置后，务必重启项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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 方便拿取数据

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