时间戳

首页 > 解决方案 > VueJS - 用于构建的 vue.config.js 代理配置

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

问题描述

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

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

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

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

谢谢！

标签： node.jsvue.jsproxycross-domain

解决方案

您可以尝试另一种将 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 的官方文档中查找更多信息

为了处理 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 应用程序提供服务

推荐阅读