前端本地原生开发好用的 http server 服务(npm 包形式、支持热更新、简单好用)
一、简介
有时候在本地原生网页开发的时候,需要起一个服务能够直接访问当现在正在开发
index.html
等内容,也就是希望通过npm
包在进入项目文件夹后,直接可以起一个可访问的 http 链接
,不希望在去安装nginx
。下面例举几个:
serve:为本地静态页面创建一个可访问的服务,不支持热更新
http-server:为本地静态页面创建一个可访问的服务,不支持热更新,支持
https
live-server:为本地静态页面创建一个可访问的服务,支持热更新(运行起来默认支持,可以修改延迟时间),支持
https
alive-server:为本地静态页面创建一个可访问的服务,支持热更新(运行起来默认支持,可以修改延迟时间),支持
https
webpack-dev-server:为本地静态页面创建一个可访问的服务,支持热更新
二、serve
基本使用
安装
$ npm i -g serve
使用
方式一:
# 1、进入静态网页文件夹 $ cd ./dist # 2、起服务 $ serve
方式二:
# 1、在任意位置,指定给某个文件夹起服务,例如根目录 $ serve -s ./dist
方式三:
# 1、修改端口号,默认 3000 $ serve -s ./dist -p 10008
三、http-server
基本使用
安装
$ npm i -g http-server
使用
方式一:
# 1、进入静态网页文件夹 $ cd ./dist # 2、起服务 $ http-server
方式二:
# 1、在任意位置,指定给某个文件夹起服务,例如根目录 $ serve ./dist
方式三:
# 1、修改端口号,默认 3000 $ serve ./dist -p 10008
方式四:
# 起了服务,并打开浏览器 $ serve -o # 以当前文件夹起了服务,访问到指定子目录层级,并打开浏览器 $ serve -o ./dist
四、live-server
基本使用
安装
$ npm i -g live-server
使用
方式一:
# 1、进入静态网页文件夹 $ cd ./dist # 2、起服务 $ live-server
方式二:
# 1、在任意位置,指定给某个文件夹起服务,例如根目录 $ live-server ./dist
方式三:
# 1、修改端口号,默认 3000 $ live-server ./dist --port=10008
方式四:
# 1、延迟热更新,保证内容输入完成后在更新,延迟 1 秒,单位毫秒 $ live-server --wait=1000
五、剩下的自行看文档
alive-server
、webpack-dev-server
使用大差不差。