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

Question

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

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

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

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

我的配置：

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': '/'
      }
    }
  },
}

Answer 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