Node.js 本地静态服务详解：http-server 与 live-server

在前端开发过程中，我们经常需要一个本地服务器来预览 HTML、CSS、JavaScript 等静态文件。虽然许多现代前端框架（如 React, Vue, Angular）都自带了开发服务器，但对于一些简单的项目、纯静态网站或快速原型开发，使用 Node.js 提供轻量级的本地静态服务器会更加方便快捷。本文将详细介绍两个广受欢迎的 Node.js 静态服务器工具：http-server 和 live-server。

“好的本地开发服务器，让你的前端工作流如丝般顺滑。”

一、为什么需要本地静态服务？

在浏览器中直接打开本地的 HTML 文件（file:/// 协议）通常会有一些限制和问题：

AJAX/Fetch 请求受限：浏览器出于安全考虑（同源策略），不允许 file:/// 协议下的页面进行跨域 AJAX 请求，甚至无法加载本地其他文件的 AJAX 请求。
动态加载问题：某些 JavaScript 模块加载器（如 ES Module import 语句）在 file:/// 协议下可能无法正常工作。
开发工具功能不全：一些浏览器扩展或开发工具可能依赖于 HTTP/HTTPS 协议才能正常工作。
实时预览：没有热重载或自动刷新功能，每次修改代码都需要手动刷新浏览器。

一个本地的 HTTP 服务器可以解决以上所有问题，提供一个更接近生产环境的开发预览环境。

二、http-server：轻量级静态文件服务器

http-server 是一个简单、零配置的命令行 HTTP 服务器。它能够一键启动一个本地服务器，并将当前目录下的文件作为静态资源提供访问。

1. 安装

http-server 通常作为全局工具安装，这样你可以在任何目录下直接使用。

1
2
3

npm install -g http-server
# 或者使用 yarn
yarn global add http-server

2. 基本使用

在需要提供静态服务的目录下，打开命令行工具，运行：

1	http-server

示例输出：

Starting up http-server, serving ./
Available on:
  http://192.168.1.100:8080
  http://127.0.0.1:8080 (lo)
Hit CTRL-C to stop the server

这表示服务器已经在 http://127.0.0.1:8080 (以及你的局域网 IP) 启动，端口号为 8080。在浏览器中访问这个地址，就会看到当前目录下的文件列表或 index.html 文件。

3. 常用选项

http-server 提供了许多命令行选项来定制其行为：

-p <port> 或 --port <port>: 指定服务器端口。默认为 8080。
1
http-server -p 3000
-a <address> 或 --address <address>: 指定服务器监听的 IP 地址。默认为 0.0.0.0 (监听所有可用 IP)。
1
http-server -a 127.0.0.1 # 只允许本地访问
-s 或 --silent: 静默模式，不输出任何日志到控制台。
-d <seconds> 或 --delay <seconds>: 访问文件时，人为延迟响应时间，用于模拟慢速网络。
-i 或 --no-indexes: 禁用目录索引。如果目录下没有 index.html，将会返回 404 错误而不是文件列表。
-c <seconds> 或 --cache <seconds>: 设置最长缓存时间（Cache-Control 头）。默认 3600 秒 (1小时)。设为 -1 禁用缓存。
1
http-server -c -1 # 禁用缓存
-o 或 --open: 服务器启动后自动在浏览器中打开指定的 URL。
1
http-server -o /my-page.html # 默认打开 index.html
-S 或 --ssl: 启用 HTTPS。需要提供 --cert 和 --key 选项。
1
http-server -S --cert cert.pem --key key.pem
-C <file> 或 --cors <file>: 启用 CORS。
-P 或 --proxy: 代理模式，将所有未匹配到的请求代理到指定的 URL。
1
http-server -P http://localhost:8081

示例：在 3000 端口启动，并自动在浏览器中打开

1	http-server -p 3000 -o

4. 路由和 SPA 支持

http-server 本身不提供复杂的路由功能，它是一个纯粹的静态文件服务器。对于单页应用 (SPA)，如果刷新页面或直接访问深层路由（如 /users/123），服务器会尝试查找对应的物理文件，导致 404 错误。

为了支持 SPA，你可以使用其 --entry-file 选项，它会将所有未找到的请求重定向到你指定的入口文件（通常是 index.html）。

1	http-server --entry-file index.html

这样，不管访问 /users/123 还是 /about，都会返回 index.html，然后由前端路由库进行客户端路由。

三、live-server：带实时重载的静态文件服务器

live-server 是在 http-server 的基础上增加了实时重载 (Live Reload) 功能。每当你修改并保存文件时，浏览器会自动刷新，这极大提高了开发效率。

1. 安装

live-server 也通常作为全局工具安装。

1
2
3

npm install -g live-server
# 或者使用 yarn
yarn global add live-server

2. 基本使用

在需要提供静态服务的目录下，打开命令行工具，运行：

1	live-server

示例输出：

1
2
3

Serving '.' at http://127.0.0.1:8080
Opening 'index.html'
Hit CTRL-C to stop the server

与 http-server 类似，这会在 8080 端口启动服务器并自动打开浏览器。不同的是，当你修改并保存项目中的 HTML、CSS 或 JS 文件时，浏览器会自动检测到变化并刷新页面。

3. 常用选项

live-server 的选项与 http-server 类似，并增加了一些实时重载相关的选项：

--port=<port>: 指定服务器端口。默认为 8080。
--host=<address>: 指定服务器监听的 IP 地址。默认为 0.0.0.0。
1
live-server --port=3000 --host=127.0.0.1
--open=<path>: 服务器启动后自动在浏览器中打开指定的 URL。默认为 index.html。
1
live-server --open=/my-page.html
--no-browser: 不自动打开浏览器。
--no-css-inject: 禁用 CSS 注入（实时更新 CSS 而不刷新整个页面）。默认启用。
--quiet: 不输出任何日志。
--wait=<seconds>: 每当文件更改时，在刷新浏览器前等待指定秒数。

--mount=<route>:<path>: 将某个路径挂载到指定的路由上。

1	live-server --mount=/api:./data # 访问 /api 会去 ./data 目录找文件

--entry-file=<file>: 指定入口文件。类似于 http-server 的 SPA 支持。
1
live-server --entry-file=index.html

--proxy=<source>:<target>: 代理请求。

1	live-server --proxy=/api:http://localhost:8081

--htpasswd=<file>: 使用 htpasswd 文件进行密码保护。

示例：在 3000 端口启动，禁用 CSS 热更新，并指定 SPA 入口文件

1	live-server --port=3000 --no-css-inject --entry-file=index.html

4. 监听文件变化

live-server 默认会监听当前目录下的所有文件变化。你可以使用 .gitignore 文件来忽略某些文件或目录，使其不触发实时重载。

四、选择 `http-server` 还是 `live-server`？

http-server:
- 优点: 纯粹、简单、无额外功能，启动速度可能略快一点点。
- 适用场景: 只需要一个基本的 HTTP 服务器，F5 刷新不是问题，或者在 CI/CD 环境中提供静态文件。
live-server:
- 优点: 内置实时重载，极大提升开发效率。CSS 默认支持 HMR (热模块替换)，即只更新样式而不刷新页面。
- 适用场景: 前端日常开发中的首选，无论是纯静态网站、学习示例，还是为复杂的框架应用提供辅助的静态文件服务。

对于大多数前端开发者而言，live-server 由于其自动刷新的功能，通常是更优的选择，因为它能够显著提升你的开发体验。

五、在项目中配置脚本

虽然全局安装很方便，但在团队协作或项目依赖管理中，更推荐将这些工具作为项目的开发依赖安装，并配置到 package.json 的 scripts 中。

安装为开发依赖:

1 2	npm install http-server --save-dev npm install live-server --save-dev

配置 package.json:

{
  "name": "my-static-project",
  "version": "1.0.0",
  "description": "A simple static website",
  "scripts": {
    "start": "live-server --port=8080 --open=/index.html",
    "serve:basic": "http-server --port=8000"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "http-server": "^14.1.1",
    "live-server": "^1.2.2"
  }
}