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

Posted 2023-02-22

【中文标题】VueJS - 用于构建的 vue.config.js 代理配置

【英文标题】：VueJS - vue.config.js proxy configuration for build

【发布时间】：2019-09-02 07:29:50

【问题描述】：

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

现在我需要将我的应用程序部署到主机，所以我运行npm run build，更改我的 Ajax 调用的 url，但它没有运行......所以我确实需要配置我的代理以进行部署（构建） ，不适用于 devServer。

这样做的正确方法是什么？

我已经尝试过： serverproxy:... 和 buildproxy:...，但在运行 npm run build 时不允许使用它们。

谢谢！

【问题讨论】：

找到解决方案了吗？我也面临同样的问题..如果是，你能更新一下吗

查看这个答案：***.com/questions/55106295/…

您是否尝试过获取 CORS 的 chrome 扩展并从 vue.config 中删除配置？

这个问题的结果是什么？从配置中删除代理并使用来自 .env 的 VUE_APP_API_URL 的完整 url ？

【参考方案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 问题，我可以给你一些提示。

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

【讨论】：

如你所说，我创建了 .env.development -> API_URL=localhost:8080 和 .env.production -> API_URL=fts.cardconnect.com:6443。并在 axios post 方法中调用 const url = process.env.VUE_APP_API_URL const URL = url+'/cardsecure/api/v1/ccn/tokenize';但它显示错误 POST localhost:8080/undefined/cardsecure/api/v1/ccn/tokenize 404 (Not Found)。还有一件事我已经评论了 vue.config.js 文件中的所有行

@PvDev 对不起我的错误，您还需要使用 VUE_APP 关键字定义 API URL，因此不要将 API_URL 定义为 VUE_APP_API_URL你的 env 文件，我也编辑了我的答案

我是否会面临生产的跨原产地政策问题。因为我在 http:dev-xxx-firebaseapp.com 中有网站，而我的 api 来自 cardconnect。 fts.cardconnect:6443我已经遇到过这个问题，所以才问

xhr.js?b50d:178 POST localhost:8080/cardsecure/api/v1/ccn/tokenize 404（未找到）是否需要在 vue.config.js 中添加一些内容。因为我已经评论了 vue.config.js 中的所有行

我明白了，所以我知道有两种方法，其中一种是在您的 api 中定义一个 CORS 过滤器，让您的网站域通过 CORS 配置访问服务器，第二种方法是从 api 为您的网站提供服务应用程序，因此它们将在同一个域中

【参考方案2】：

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

代理并不打算部署到生产环境，这就是为什么您找不到有关使用它进行部署的信息的原因。 如果您提供静态 /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 传递到我们的本地服务器

【讨论】：

感谢您的回答。这里我是纱线构建。通过创建 vue.config.js deveserver 代理 url，它在 localhost:8080 中工作正常。如何做构建版本。我对 vuejs 完全陌生。我已经问过这个问题并在那里分享了部分代码。这是链接***.com/questions/56165377/… ..你能帮我解决这个问题吗..