Express：打造一个简洁易用的 SPA 静态资源服务器

2024-02-26 01:08:51

单页应用程序（SPA）已成为当今网络开发的标准，为用户提供了流畅、响应迅速的体验。然而，在开发阶段，向利益相关者展示和共享 SPA 页面通常需要设置一个本地服务器。本文将指导你使用 Express 框架搭建一个简单的 SPA 静态资源服务器，让你轻松地展示你的前端页面。

准备工作

在开始之前，你需要确保已在本地安装了 Node.js 和 Express。你可以通过终端运行以下命令进行安装：

npm install -g nodejs
npm install -g express

创建 Express 服务器

接下来，创建一个新的 Node.js 项目目录，并在此目录中创建一个名为 server.js 的文件。在这个文件中，我们将编写我们的 Express 服务器。

// 引入 Express
const express = require('express');

// 创建 Express 应用
const app = express();

// 设置静态资源目录
app.use(express.static('public'));

// 启动服务器
const port = 3000;
app.listen(port, () => {
  console.log(`服务器正在 ${port} 端口运行`);
});

在上面的代码中，我们创建了一个新的 Express 应用，并设置了 public 目录为静态资源目录。这意味着你可以将你的 SPA HTML、CSS 和 JavaScript 文件放置在这个目录中。

运行服务器

要运行服务器，请在终端中导航到 server.js 文件所在的目录，然后运行以下命令：

node server.js

这将在 3000 端口启动 Express 服务器。

将 SPA 页面添加到 public 目录

接下来，你需要将你的 SPA 页面添加到 public 目录。创建一个 index.html 文件，并将其放置在这个目录中。你的 index.html 文件可以包含以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
</head>
<body>
  <h1>我的 SPA 页面</h1>
</body>
</html>