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

Question

我目前在vue.config.js中使用devServer{proxy:{...}}来配置api调用的代理，以避免应用程序中的CORS问题。当我在本地主机上运行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不会像代理服务器一样交付网络服务器，它将在dist/目录中部署捆绑的Javascript。

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网址始终是生产服务器的网址，我们使用this setting in the proxy传递到本地服务器