前端本地原生开发好用的 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 使用大差不差。