让Vue或React项目在本地起飞：Node.js搭建服务器的秘密武器

2023-03-11 20:29:45

用 Node.js 和 Express 轻松搭建 Vue 或 React 项目的本地服务器

前端开发人员经常面临一个问题：辛辛苦苦打包好的 Vue 或 React 项目，在本地打开 index.html 时却发现浏览器报错连连，无法正常运行。这是因为这些项目通常需要在后端服务器上才能发挥作用。但如果你不想总是依赖后端搭建服务器呢？别担心，Node.js 和 Express 就是你的秘密武器！

Node.js 和 Express：本地服务器的黄金组合

Node.js 是一种流行的 JavaScript 运行时环境，而 Express 是一个轻量级的 Node.js 框架，专为构建 Web 应用和 API 而设计。它们强强联手，可以轻松搭建一个本地服务器，让你的 Vue 或 React 项目在本地运行起来。

搭建步骤：让你的项目在本地唱响

1. 安装 Node.js 和 Express

首先，确保你的电脑上已安装了 Node.js 和 Express。你可以通过 Node.js 官网或使用 npm 命令进行安装。

2. 创建项目文件夹

在你的电脑上创建一个新的文件夹，作为你的项目文件夹。在这个文件夹中，你会存放你的 Vue 或 React 项目以及 Node.js 服务器代码。

3. 初始化 Node.js 项目

在项目文件夹中，打开命令行窗口，输入以下命令初始化一个 Node.js 项目：

npm init -y

4. 安装 Express

使用 npm 命令安装 Express 框架：

npm install express

5. 创建服务器文件

在项目文件夹中，创建一个名为 server.js 的文件，并输入以下代码：

const express = require('express');
const app = express();

app.use(express.static('dist'));

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

这段代码创建了一个简单的 Express 服务器，并指定了静态文件（如你的 Vue 或 React 项目构建后的 dist 目录）的路径。

6. 构建 Vue 或 React 项目并复制到 dist 目录

根据你的项目类型（Vue 或 React），使用相应的构建命令将项目构建为生产环境，并将构建后的文件复制到 dist 目录。

7. 运行服务器

在项目文件夹中，打开命令行窗口，输入以下命令运行服务器：