VueJS-用于构建的vue.config.js代理配置

Question

我目前devServer{proxy:{...}}在vue.config.js中使用它来配置api调用的代理，以避免应用程序中的CORS问题。当我npm run serve在本地主机上运行时，它工作正常。

现在，我需要将应用程序部署到主机，因此我可以运行npm run build，更改Ajax调用的url，并且该URL无法运行...因此，我真正需要的是配置代理以进行部署（构建），而不是为devServer进行配置。

正确的方法是什么？

我已经尝试过： server{proxy:{...}}和build{proxy:{...}}，但是在运行时都不允许使用它们npm run build。

谢谢！

Answer 1

您可以尝试另一种将 API URL 添加到 .env 文件的方法

如果您使用 Vue CLI，您可以创建.env.development和.env.production文件，并将 API URL 用于开发和生产，例如：

.env.development

VUE_APP_API_URL=http://localhost:8080/api

.env.生产

VUE_APP_API_URL=http://myapp.com/api

在您的项目文件中，您可以通过放置VUE_APP_关键字来访问变量；

用于发出 api 请求的文件

const url = process.env.VUE_APP_API_URL
const res = axios.get(url, config).then (...)
                                  .catch(...)

您可以从Vue 的官方文档中查找更多信息

为了处理CORS问题，我可以给你一些提示。

1. 将您的应用程序划分为名为 server 和 client 的包
2. 将与 vuejs 相关的所有内容移动到客户端文件夹
3. 将 server.js 移动到服务器文件夹
4. 在 server.js 中实现 cardconnect
5. 通过 expressjs 创建一个 nodejs api 并将 cardconnect 逻辑移动到控制器（端点）
6. 使用通过 vue.js 实现 cardconnect 的 nodejs api（这将解决 cors 问题，因为您不从 vuejs 发出请求，而是通过 node.js 触发 cardconnect 实现）
7. 使用您的 Node.js 服务器为 Vue 应用程序提供服务

Answer 2

默认情况下，Vue CLI 不会像代理那样提供网络服务器，它会在dist/目录中部署捆绑的 Javascript 。

1. 代理并不打算部署到生产中，这就是为什么您找不到有关使用它进行部署的信息的原因。
2. 如果您为静态/dist目录提供服务，请在此处找到您的提供商（S3、Netlify、Firebase）的说明并按照它们进行操作。

更长的答案：

您遇到了一个问题，因为该代理不应该用于生产。随附的代理 Vue CLI 是webpack-dev-server。Vue CLI 使用它来使您能够在开发期间在本地提供 Javascript 文件。

如果您在 prod 中使用 webpack-dev-server（又名代理），则会存在安全漏洞。不要这样做。

相反，您需要找到您正在使用的托管服务提供商并按照此处的说明进行操作：https : //cli.vuejs.org/guide/deployment.html来部署您的应用程序。如果您的应用程序是个人的或可以是公开的，我建议使用Netlify。

例如...在我的生产设置中，我们部署到 AWS S3 存储桶并使用 AWS Cloudfront CDN 或 Fastly CDN 提供内容。我们的 API url 始终是生产服务器的，我们在代理中使用此设置传递到我们的本地服务器