vue-cli开发模式如何与服务端api结合？

Posted 2023-02-22

【中文标题】vue-cli开发模式如何与服务端api结合？

【英文标题】：How to combine vue-cli development mode with server-side api?

【发布时间】：2019-10-18 09:27:02

【问题描述】：

我是 vue 新手，在这里有点困惑。

我正在使用 vue-cli 构建一个 vue 应用程序，我知道我可以使用 npm run serve 运行开发服务器，它在我的 package.json 中作为脚本引用为 vue-cli-service serve

但我的应用需要一些来自本地 node.js 服务器的数据。我无法从开发模式请求此服务器，因为它在不同的服务器上运行。 为了让我的应用正常运行，我有义务使用

构建生产环境

npm run build

然后要求我的节点服务器默认渲染生成的 index.html 文件。

如何将开发模式和我的节点服务器结合起来？

完成这项工作的最佳方法是什么？

非常感谢

【问题讨论】：

您有任何错误吗？您在哪个端口上运行节点服务器？我愿意打赌它与端口有关-您尝试做的事情是可能的..

相同 ip 但不同端口，我在浏览器控制台中收到 access to XMLHttpRequest at 'http://localhost/connected' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource 错误

如果您使用 Express，您很可能需要添加 cors 库或 cors 标头服务器端。Good example here。

是的，非常感谢！

您可以简单地定义一个代理来解决本地开发的这个问题：cli.vuejs.org/config/#devserver-proxy

【参考方案1】：

我偶然发现了这个，发现答案隐藏在 cmets 列表的底部，所以我想我会突出显示它。 这个答案取自@Frank Provost 评论，这确实应该是公认的答案。正如他在链接https://cli.vuejs.org/config/#devserver-proxy 中提到的那样，您需要做的就是在您的（客户端）项目根目录中创建/编辑 vue.config.js 文件以包含以下内容：

module.exports = 
  devServer: 
    proxy: 'http://localhost:3000' // enter dev server url here 
  

然后像往常一样从您的服务器项目启动您的开发服务器：

[server-root]$ npm run dev

并从 vue-cli 项目运行您的客户端项目

[client-root]$ npm run serve

然后，当您访问客户端 url（通常是 localhost:8080）时，所有 api 请求都将被转发到您的开发服务器。所有热模块更换仍然适用于客户端和服务器。