我目前在 vue.config.js 中使用 devServer{proxy:{...}} 为 api 调用配置代理，以避免我的应用程序中出现 CORS 问题。当我在本地主机上运行 npm run serve 时它工作正常。
现在我需要将我的应用程序部署到主机，所以我运行 npm run build，更改我的 Ajax 调用的 url，但它没有运行...所以我真正需要的是配置我的部署(构建)代理，而不是 devServer。
正确的做法是什么？
我已经尝试过:
server{proxy:{...}} 和 build{proxy:{...}}，但是在运行 npm run build 时不允许使用它们。
谢谢!
最佳答案
您可以尝试另一种方法，将 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 问题，我可以给你一些提示。
- 将您的应用划分为名为服务器和客户端的包
- 将与 vuejs 相关的所有内容移至 client 文件夹
- 将 server.js 移动到服务器文件夹
- 在 server.js 中实现 cardconnect
- 通过 expressjs 创建一个 nodejs api 并将 cardconnect 逻辑移动到 Controller (端点)
- 使用通过 vue.js 实现 cardconnect 的 nodejs api(这将解决 cors 问题，因为您不从 vuejs 发出请求，而是通过 node.js 触发 cardconnect 实现)
- 使用您的 Node.js 服务器为 Vue 应用程序提供服务
关于node.js - VueJS - 用于构建的 vue.config.js 代理配置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55636271/