node.js - 如何将vue-cli开发模式与服务端api结合起来？

Question

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

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

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

进行生产构建

npm run build

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

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

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

非常感谢

Answer 1

我偶然发现了这个，并发现答案埋在评论列表的底部，所以我想我应该突出显示它。
这个答案取自@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 请求都将转发到您的开发服务器。所有热模块替换在客户端和服务器上仍然有效。