https://baijiahao.baidu.com/s?id=1719682035800288117&wfr=spider&for=pc

最近常玩vite+vue3来开发一些小项目，真正体验到，什么是下一代构建工具。我们知道，vue-cli都是以webpack为打包工具的，项目开始打包速度还可以，随着项目文件的增多，打包时间也变得很长，据说前端工程师到公司第一步，都是先开启项目，然后整理一天的工作内容，开会，开会回来都不见得启动完，可见一斑啊。

 

Vite构建工具的LOGO

 

vite的开启开发环境时，同是创建一个新项目，第一次会稍微慢一些，但也比webpack快很多，以后就更别说了，简直甩webpack好几条街，不过今天的主角不是vite,而是它的配置服务器工具：live server。

 

vscode中live server 插件安示意图

01优势和使用场景

 

有人可能要说，它能有apache,稳定，插件多？它能nginx高效，抗并发吗？

 

 

就别说稳定和抗高并发了，live server压根就不支持动态语言比如：php，asp等，它只适合静态页面开发，不过这正适合前端开发一些临时项目，而且开启新服务，就只需运行一条命令就可以了。

 

 

我们时常会接到一些零碎的小任务，目录不能太集中，太集中不容易管理维护，而live server就完美地解决这些问题，不论路径在哪，什么端口，只需一条命令就能开启，如果有多个项目穿插进行，可以制作bat,一键运行多个临时环境，是不是想想都能笑出来。这可是apache,nginx不好实现的东西。说了这么多，还是先来看看怎么安装的吧。

 

02安装

 

从安装的方式上来说，可以分为2种：

 

 

1.live server是有环境依赖的，它依赖NODE环境，不过这对于当下的前端工程师来说，是必备工具，但是对于小白来说，还是有必要说一下NODE环境的安装方法，不用担心，windows版的node安装超级简单的。

 

 

百度搜索-node ，点击官方网站，下载对应的版本，下载完成，点击下一步下一步完成。

 

 

完成之后，只需win +ｒ，输入ｃｍｄ，npm install live-server -g，等待安装完成。

 

npm 安装live-serve示意图

 

2.如果你使用vscode编辑器，那就安装它就太简单了，只需在点击插件或ctrl+shift+x，搜索live server,找到插件，直接点击安装即可，则不需要安装依赖，因为插件里包含内置了依赖包。

 

vscode安装live server插件示意图

 

至于你选择哪种方法安装，看你需要了。如果你平时开发就用vs code，哪没得说，就选第二种就对了。但这两种安装方法，在使用上是有细微差别的，我会在用法里详细介绍。

 

03用法

 

其实用法上的区别，就在依赖环境的变化，相信聪明的你，应该也可以推理出来，比如VScode的安装的插件只能使用在vscode的环境里，在外部是不能使用，而第一种方法，我们是在系统里安装了依赖，也就是，live-server可以在系统使用，使用的范围自然比第一种大，至于你用哪种？就看你的需要了

 

 

先说第1种用法，如果想实现不论在什么路径下，都能运行live-server命令，还需一一步操作：设置系统环境变量（最便捷的设置环境变量的方法，没有之一）。

 

 

具体操作：按windows键，键盘输入：huanjing，然后回车，ctrl+n, 按p快速定位Path,双击打开，新建，录入路径：C:\Users\wusil\AppData\Roaming\npm\，确定。

 

添加环境变量操作步骤示意图

 

操作完成之后，我们就可以愉快的使用live-server,下面介绍几个常用的参数：

 

 

  • --port=端口号，默认为8080，若使用，会随机生成一个端口号（是不是很贴心）

  • --open=路径地址，不输入，默认是当前命令的环境路径，

  • --wait=时间间隔，默认为100ms,（原理防抖）可以自由设定时间，单位ms

  • --proxy=路由地址，配置代理地址，这也是前端比较常用的功能。

     

     

     

 

 

注：命令的环境路径，是指cmd\powerShell\bash里的默认路径。

 

命令环境路径详解示意图

 

这些都是我常用的几个，其它你可以参考官方，当然，如果临时服务环境，有一些公共的配置项的话，你可以制作一个公共配置文件，.live-server.json，存储在live-server的安装目录，不过说实话，我是没有怎么用过，一般的需求就哪几个。其实平时使用最多的就是使用git Bash here,live-server，回车，超级方便。

 

 

什么命令太长了，不喜欢？没有关系，我给你准备好了解决方法。git bash自定义命令，具体操作如下：

 

 

1.打开GIT的安装目录，C:\Program Files\Git\etc,用记事本打开 bash.bashrc文件

 

 

2.在文件末尾，添加alias lives="winpty live-server.cmd" ,保存。

 

自定义命令效果示意图

 

若遇到无法保存的情况，可以下方留言，因为文章篇幅的原因，不再过多赘述了。

 

 

至于VScode插件的用法吗？就一句话可以说明白：

 

 

选择项目下的文件，右键，open in live serve，点击即可。

 

vscode使用live-server插件的方法示意

 

好了，今天的文章就到这了，希望你从中有所收获，如果对你有些许帮助的话，别忘了三联，关注+转发+点赞，你的肯定是对我最大的支持。