时间戳

首页 > 解决方案 > 如何仅使用本地计算机上的一个端口将 NodeJS/Express 后端连接到 VueJS 前端？

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

问题描述

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

localhost:8080 应该指向我的 Vue 应用程序的主页，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。

标签： node.jsvue.jsdevelopment-environmentproduction-environment

解决方案

好吧，如果您需要在同一个端口上运行两者，您可以首先构建您的应用程序，以便您收到一个 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)

推荐阅读