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

Question

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

现在我需要将我的应用程序部署到主机上，所以我运行npm run build，更改Ajax调用的url，但它没有运行。。。因此，我真正需要的是为部署（构建）配置代理，而不是为devServer配置代理。

正确的方法是什么？

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

非常感谢。




Answer 1

默认情况下，Vue CLI不会像代理一样提供Web服务器，它将在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始终是生产服务器URL，我们在代理中使用此设置传递到本地服务器

Answer 2

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

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

.环境。发展

VUE_APP_API_URL=http://localhost:8080/api

.环境。生产

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