Vue 的 dist 文件本地预览神器：http-server
2023-11-14 21:23:37
在 Vue 开发中，本地预览 dist 文件是必不可少的调试步骤。然而，默认情况下，Vue CLI 不会提供一个方便的本地服务器。此时，http-server 闪亮登场，作为 Vue dist 文件本地预览的最佳工具。
http-server 是一款轻量级的、零配置的命令行 HTTP 服务器，旨在简化本地测试和开发。它不需要任何繁琐的设置，开箱即用，非常适合快速预览 dist 文件。
安装
安装 http-server 非常简单，可以使用 npm 或 yarn：
npm install -g http-server
或
yarn global add http-server
安装完成后，你就可以在命令行中使用 http-server 命令了。
使用
使用 http-server 预览 dist 文件只需一个简单的命令：
http-server dist
其中，dist 是 Vue dist 文件所在的目录。
默认情况下，http-server 会在 8080 端口启动一个服务器。你可以通过 -p 参数指定不同的端口：
http-server dist -p 3000
设置参数
除了设置端口之外，http-server 还提供了一些其他有用的参数：
-a或--address: 设置监听地址。-c或--cors: 启用 CORS 支持。-s或--silent: 禁用日志输出。
例如，要设置监听地址为 0.0.0.0 并启用 CORS 支持，可以使用以下命令：
http-server dist -a 0.0.0.0 -c
1. 设置监听地址
默认情况下，http-server 会监听本机地址 127.0.0.1。如果你希望其他设备也能访问你的预览，可以使用 -a 或 --address 参数指定监听地址。
http-server dist -a 0.0.0.0
这将使服务器监听所有可用的网络接口。
2. gzip 压缩
http-server 支持 gzip 压缩，可以减少传输文件的大小，从而加快加载速度。要启用 gzip 压缩，可以使用 -g 或 --gzip 参数。
http-server dist -g
3. CORS 支持
CORS（跨域资源共享）是一种机制，它允许来自不同域的脚本访问受限资源。默认情况下，http-server 不支持 CORS。要启用 CORS 支持，可以使用 -c 或 --cors 参数。
http-server dist -c
这将允许来自所有域的脚本访问你的预览。
4. HTTPS 支持
http-server 还支持 HTTPS。要使用 HTTPS，你需要提供一个有效的 SSL 证书和密钥。证书和密钥可以放在一个 PEM 文件中，也可以放在单独的文件中。
要使用 PEM 文件，可以使用 -S 或 --ssl 参数。
http-server dist -S /path/to/certificate.pem
要使用单独的证书和密钥文件，可以使用 -C 或 --cert 和 -K 或 --key 参数。
http-server dist -C /path/to/certificate.pem -K /path/to/key.pem
5. 缓存控制
http-server 支持缓存控制，可以防止浏览器频繁地重新加载文件。要启用缓存控制，可以使用 -x 或 --cache 参数。
http-server dist -x
这将设置缓存头，使浏览器在一段时间内缓存文件。
6. 虚拟主机
http-server 支持虚拟主机，可以让你在同一台服务器上托管多个网站。要使用虚拟主机，你需要创建一个配置文件，其中包含虚拟主机的详细信息。
配置文件的格式如下：
server {
listen 80;
server_name example.com;
root /path/to/website;
}
创建配置文件后，可以使用 -V 或 --virtual 参数指定配置文件。
http-server dist -V /path/to/config.json
7. 其他选项
除了上面列出的选项之外，http-server 还提供了一些其他有用的选项。这些选项可以在官方文档中找到：https://github.com/http-server/http-server。
结语
http-server 是一款功能强大、易于使用的本地 HTTP 服务器，是 Vue 开发者预览 dist 文件的理想工具。通过本文提供的教程，你可以在几分钟内轻松设置并使用 http-server。
