如何在生产环境中代理 Vue.js 中的 URL 调用？答案

【问题标题】：How to proxy URL call in Vue.js in production?如何在生产环境中代理 Vue.js 中的 URL 调用？
【发布时间】：2019-03-18 05:43:08
【问题描述】：

在 Dev 中，我有我的本地 vue.js 项目和一个开发服务器。我遵循了这个指南：

http://vuejs-templates.github.io/webpack/proxy.html

设置proxyTable 以便每当我使用Axios 对开发服务器进行REST 调用时，它将重定向到我的开发服务器而不是vue url。

当我部署到 prod 时，我的 vue 构建包部署到 S3，而我的 rest 服务器在 EBS 中。它们位于不同的子域中。所以我的 Vue 还需要为所有 REST 调用设置一个代理。但是，vuejs&webpack 不允许在 build 部分下的配置文件中使用 proxyTable。处理这个问题的最佳方法是什么？

我的配置：

module.exports = {
  build: {
    env: 'prod',
    productionSourceMap: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
       logLevel: 'info',
       target: 'http://myRestServer.com/...',
       changeOrigin: true,
       pathRewrite: {
         '^/api': '/'
       }
      }
    }, 
  },
 dev: {
   proxyTable: {
     '/api': {
      logLevel: 'info',
      target: 'http://127.0.0.1:3005',
       changeOrigin: true,
      pathRewrite: {
         '^/api': '/'
      }
    }
  },
}

【问题讨论】：

Vue.js 在浏览器中运行。除非您设置自己的自定义代理服务，否则您无法通过代理路由 AJAX 调用。
您应该在您的 aws 架构中为您的 API 调用和代理定义一个 dns

标签： vue.js webpack proxy

【解决方案1】：

也许你应该改用devServer。而对于build，我想现在还有另一个名字。

例如：

module.exports = {
  devServer: {
   // your settings
  }
}

例如：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

参考：vue-cli

【讨论】：

这适用于开发环境，当 Vue 在 localhost:8080 上提供文件时。