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

Question

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

Localhost:8080 应该指向我的 Vue 应用程序的主页并且 API 请求应该遵循 localhost:8080/api/...

在我的生产环境中，我通过将 Vue 应用程序作为一组静态文件（'dist' 文件夹）来使用相同的 port/URL。然而，在我的开发环境中，我不知道如何设置它。

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

设置它的好方法是什么？

谢谢

编辑：

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

发展我在 package.json 中使用一个脚本在不同的端口上启动前端和后端服务器，使用 pm2 运行 'background' 中的服务器而不是阻止 [=48= 中的进一步命令].我在我的 vue.config.js 中配置了一个代理，将我在前端进行的 API 调用重定向到正确的基础 URL 并使用 cors 作为中间件来允许对我的 API 的请求来自其他 domains/ports.
分期我在 package.json 中使用一个脚本将 Vue 应用程序构建到一个文件夹（我的后端文件夹中的 'dist' 文件夹）中，该文件夹是静态文件的集合并启动后端服务器。我的后端设置为知道我何时要进入暂存模式，然后提供 'dist' 文件夹中的静态文件。
制作我在 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

假设该节点和 'app' 将始终运行在同一台服务器上，您可以只使用像 ejs 这样的模板库。

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

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

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

How can I connect my NodeJS/Express backend to my VueJS frontend using only one port on my local machine?

development-environment

production-environment

node.js

vue.js