前端本地原生开发好用的 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
    

五、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 使用大差不差。