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

Question

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

现在我需要将我的应用程序部署到主机，所以我运行npm run build，更改我的 Ajax 调用的 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.production

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's official docs寻找更多信息

为了处理 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 不会像代理一样提供网络服务器，它会将捆绑的 Javascript 部署在 dist/ 目录中。

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

更长的答案：

您遇到了问题，因为代理不应该用于生产。附带的代理 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 始终是生产服务器的，我们使用 this setting in the proxy 传递到我们的本地服务器