如何在生产环境中代理 Vue.js 中的 URL 调用?
Posted
技术标签:
【中文标题】如何在生产环境中代理 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 上提供文件时。以上是关于如何在生产环境中代理 Vue.js 中的 URL 调用?的主要内容,如果未能解决你的问题,请参考以下文章