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

Question

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

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

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

当我部署到 prod 时，我的 vue 构建包被部署到 S3，我的其余服务器在 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': '/'
      }
    }
  },
}

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