使用 http-server 开启一个本地服务器

1. http-server 简介

• 一个简单的零配置命令行 http 服务器
• 足够简单易用，可用于本地测试和开发

在写前端页面中，经常会在浏览器运行 HTML 页面，从本地文件夹中直接打开的一般都是 file 协议，不能发送 Ajax 请求，或当代码中存在 http 或 https 的链接时，HTML 页面就无法正常打开。为了解决这类情况，需要在本地开启一个 http 服务器，通过 IP 加端口号，来访问资源。

有一种做法就是通过 VSCode 的插件或者通过 WebStorm 来打开，本文介绍利用 Node.js 中的 http-server，来便捷的创建一个本地服务。

2. 安装 Node.js

官网地址，下载官网推荐版本，并安装。

在命令行输入命令 node -v 以及 npm -v 检查版本，确认是否安装成功。

3. 安装 http-server

在命令行中执行如下命令，将 http-server 安装到全局，必要的情况下需要使用管理员权限安装（-g 表示安装到全局，之后所有文件夹路径下输入 http-server 都可以使用）

npm install http-server -g

http-server 详细介绍及参数见官方。

4. 开启 http-server 服务

终端进入目标文件夹（也就是需要启动服务的文件夹），然后在终端输入如下命令：

# 只输入 http-server 的话，更新了代码后，页面不会同步更新
http-server -c-1

本地服务器就启动起来了，默认端口为 8080。

5. 关闭 http-server 服务

按快捷键 CTRL-C，终端显示 ^Chttp-server stopped，即关闭服务成功。

6. 修改 IP 和端口访问

使用默认参数在本地启动服务之后，命令行窗口会输出如下图所示的地址：

$ http-server -c-1
Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://192.168.10.50:8080
Hit CTRL-C to stop the server

端口默认是 8080，本机访问的话，两个 IP 地址都可以；手机或其他设备连接，请使用下面那个非本机环回地址访问（http://192.168.10.50:8080），并且手机或者其他设备与本机必须在同一局域网下。

我们可以通过携带参数来修改监听地址和端口：

http-server -a 127.0.0.1 -p 8090

http-server [path] [options]

• -a 参数是监听地址
• -p 参数是监听端口

7. 其他参数

参数 作用 -p 或者 –port 端口设置，默认是 8080 -a 监听地址设置默认是 0.0.0.0 -d 是否显示文件列表，默认 true -i 显示自动索引，默认 true -g 或者 –gzip 默认 false，当文件的 gzip 版本存在且请求接受 gzip 编码时，它将服务
于 ./public/some-file.js.gz，而不是 ./public/some-file.js -e 或者 –ext 如果没有提供默认文件扩展名（默认为 html） -s 或者 –silent 禁止控制台日志信息输出 –cors 允许跨域资源共享 -o 启动服务后打开默认浏览器 -c 设置缓存头信息中的缓存时间（以秒为单位）
示例：-c10 是 10 秒，默认是 3600 秒，如果要禁用缓存就使用 -c-1 -U 或者 –utc 使用 UTC 格式，在控制台输出时间信息 -P 或者 –proxy 通过一个 url 地址，代理不能通过本地解析的资源 -S 或者 –ssl 使用 https 协议 -C 或者 –cert ssl 证书文件的路径，默认是 cert.pem -K 或者 –key ssl 密匙文件路径 -h 或者 –help 显示帮助

http-server 是一个轻量级的基于 Node.js 的 http 服务器，它可以使任意一个目录成为服务器的目录，完全抛开后台的沉重工程，直接运行想要的 JS 代码。

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=k00pjjw0esy7