如何仅使用本地计算机上的一个端口将 NodeJS/Express 后端连接到 VueJS 前端？

Question

我的 Vue 应用程序是使用 Vue CLI (Webpack) 设置的，并且可以正常工作。我的 NodeJS/Express REST API 也可以正常工作。然而，为了同时运行它们，我现在为它们中的每一个启动一个本地服务器——每个都有自己的端口。我想让他们两个通过一个端口进行通信。

Localhost:8080 应该指向我的 Vue App 的主页，API 请求应该遵循 localhost:8080/api/...

在我的生产环境中，我通过将 Vue 应用程序作为一组静态文件（“dist”文件夹）提供服务来使用一个相同的端口/URL。但是，在我的开发环境中，我不知道如何设置它。

我在网上四处寻找答案，但对我遇到的所有不同术语（.env、crossenv、nginx、cors）感到迷茫，而且我在兜圈子。

什么是设置的好方法？

谢谢

编辑：

我最终创建了三种模式来运行我的应用程序：

1. 发展 我使用 package.json 中的一个脚本在不同端口上启动前端和后端服务器，使用 pm2 在“后台”运行服务器，而不是阻止终端/cmd 中的进一步命令。我在 vue.config.js 中配置了一个代理，将我在前端进行的 API 调用重定向到正确的基本 URL，并使用 cors 作为中间件来允许从其他域/端口向我的 API 发出请求。

2. 分期 我使用 package.json 中的一个脚本将 Vue 应用程序构建到一个文件夹（我的后端文件夹中的“dist”文件夹）中，该文件夹是一组静态文件并启动后端服务器。我的后端设置为知道我何时想进入暂存模式，然后在“dist”文件夹中提供静态文件。

3. 生产 我使用 package.json 中的一个脚本将 Vue 应用程序构建到一个文件夹（我的后端文件夹中的“dist”文件夹）中，该文件夹是静态文件的集合，并将我的后端（包括构建的静态文件）推送到 Heroku。

Answer 1

如果您需要在同一个端口上运行两者，您可以首先构建您的应用程序，以便您接收一个 dist 目录或任何您的输出目录命名并设置一个快速服务器来服务该应用程序并处理您的 api 请求

const express = require("express");

const path = __dirname + '/app/views/';
const app = express();

app.use(express.static(path));

app.get('/', function (req,res) {
  res.sendFile(path + "index.html");
});

app.get('/api', function (req,res) {
  // your api handler
}

app.listen(8080)

Answer 2

假设该节点和“应用程序”将始终在同一台服务器上运行，您可以只使用 ejs 之类的模板库。

然后您只需将应用程序和 api 捆绑在一起，假设前端绑定到后端，实际上您甚至不需要访问 API，因为您可以将记录作为视图的一部分返回，但是如果需要动态元素，您仍然可以点击 API。

现在，话虽如此，如果 API 是许多应用程序使用的东西，那么将其构建为自己的微服务，在自己的服务器上运行，您的前端将是独立的，这可能是有意义的。这样，您就可以分离 API 和 Vue 应用程序的关注点。