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

Posted 2023-02-22

【中文标题】如何在生产环境中代理 Vue.js 中的 URL 调用？

【英文标题】：How to proxy URL call in Vue.js in production?

【发布时间】：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

【参考方案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 上提供文件时。