前端静态web服务器live-server使用

港控/mmm° 2022-11-07 04:21 231阅读 0赞

live-server npm地址：https://www.npmjs.com/package/live-server

**live-server是一款npm工具，可以实现在本地开发中搭建一个临时静态服务器。虽然现在很多编辑器都有一键启动服务器功能，但是多学一个总归是好的。**

--------------------

### 1. 安装live-server ###

在安装live-server前需要先安装好node和npm，这个自行安装。

npm install -g live-server

如果npm安装太慢的话就用`cpm install -g live-server`安装。前提需要安装cnpm淘宝镜像，这个自行搞定。

安装完成之后可以执行命令`live-server -v` 查看版本，如果能看到就说明安装成功。

### 2. 启动项目本地服务器 ###

首先先`cd 项目跟目录路径`，然后可以直接执行`live-server`启动。

### 3. 命令常用配置表 ###

`注意：下面--是两条短横杠的，而不是一条`

<table> 
 <thead> 
  <tr> 
   <th>命令</th> 
   <th>默认参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>–port=NUMBER</td> 
   <td>PORT env var或8080</td> 
   <td>启动端口</td> 
  </tr> 
  <tr> 
   <td>–host=ADDRESS</td> 
   <td>IP env var或0.0.0.0（“任何地址”）</td> 
   <td>选择要绑定到的主机地址</td> 
  </tr> 
  <tr> 
   <td>–no-browser</td> 
   <td>–</td> 
   <td>禁止自动启动Web浏览器</td> 
  </tr> 
  <tr> 
   <td>–browser=BROWSER</td> 
   <td>–</td> 
   <td>指定要使用的浏览器，而不是系统默认值</td> 
  </tr> 
  <tr> 
   <td>–quiet | -q</td> 
   <td>–</td> 
   <td>禁止记录</td> 
  </tr> 
  <tr> 
   <td>–verbose | -V</td> 
   <td>–</td> 
   <td>更多日志记录（记录所有请求，显示所有侦听的IPv4接口，等等）</td> 
  </tr> 
  <tr> 
   <td>–open=PATH</td> 
   <td>–</td> 
   <td>将浏览器启动到PATH而不是服务器根目录</td> 
  </tr> 
  <tr> 
   <td>–watch=PATH</td> 
   <td>监视所有内容</td> 
   <td>以逗号分隔的路径字符串，专门用于监视更改</td> 
  </tr> 
  <tr> 
   <td>–ignore=PATH</td> 
   <td>–</td> 
   <td>以逗号分隔的路径字符串，可忽略（anymatch兼容的定义）</td> 
  </tr> 
  <tr> 
   <td>–ignorePattern=RGXP</td> 
   <td>–</td> 
   <td>文件的正则表达式忽略（即.*.jade）（不推荐使用赞成–ignore）</td> 
  </tr> 
  <tr> 
   <td>–no-css-inject</td> 
   <td>–</td> 
   <td>在CSS更改时重新加载页面，而不是注入更改的CSS</td> 
  </tr> 
  <tr> 
   <td>–middleware=PATH</td> 
   <td>–</td> 
   <td>导出要添加的中间件功能的.js文件的路径；可以是没有路径的名称，也不能是引用middleware文件夹中捆绑的中间件的扩展名</td> 
  </tr> 
  <tr> 
   <td>–entry-file=PATH</td> 
   <td>–</td> 
   <td>提供此文件（相对于服务器根目录）以代替丢失的文件（对于单页应用程序很有用）</td> 
  </tr> 
  <tr> 
   <td>–mount=ROUTE:PATH</td> 
   <td>–</td> 
   <td>在已定义的路径下提供路径内容（可能有多个定义）</td> 
  </tr> 
  <tr> 
   <td>–spa</td> 
   <td>–</td> 
   <td>将请求从/ abc转换为/＃/ abc（对于单页应用程序很方便）</td> 
  </tr> 
  <tr> 
   <td>–wait=MILLISECONDS</td> 
   <td>–</td> 
   <td>（默认100ms）等待所有更改，然后重新加载</td> 
  </tr> 
  <tr> 
   <td>–htpasswd=PATH</td> 
   <td>–</td> 
   <td>启用位于PATH的http-auth期望htpasswd文件</td> 
  </tr> 
  <tr> 
   <td>–cors</td> 
   <td>–</td> 
   <td>为任何来源启用CORS（反映请求来源，支持带有凭据的请求）</td> 
  </tr> 
  <tr> 
   <td>–https=PATH</td> 
   <td>–</td> 
   <td>HTTPS配置模块的路径</td> 
  </tr> 
  <tr> 
   <td>–https-module=MODULE_NAME</td> 
   <td>–</td> 
   <td>自定义HTTPS模块（例如spdy）</td> 
  </tr> 
  <tr> 
   <td>–proxy=ROUTE:URL</td> 
   <td>–</td> 
   <td>将所有对ROUTE的请求代理到URL</td> 
  </tr> 
  <tr> 
   <td>–help | -h</td> 
   <td>–</td> 
   <td>显示简洁的使用提示并退出</td> 
  </tr> 
  <tr> 
   <td>–version | -v</td> 
   <td>–</td> 
   <td>显示版本并退出</td> 
  </tr> 
 </tbody> 
</table>

### 其他更多内容可以查阅：https://www.npmjs.com/package/live-server ###