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

猜你喜欢

转载自blog.csdn.net/zz00008888/article/details/135110254