https://baijiahao.baidu.com/s?id=1719682035800288117&wfr=spider&for=pc
最近常玩vite+vue3来开发一些小项目,真正体验到,什么是下一代构建工具。我们知道,vue-cli都是以webpack为打包工具的,项目开始打包速度还可以,随着项目文件的增多,打包时间也变得很长,据说前端工程师到公司第一步,都是先开启项目,然后整理一天的工作内容,开会,开会回来都不见得启动完,可见一斑啊。
![](https://pics0.baidu.com/feed/6159252dd42a2834157c6a3a701457e314cebf57.jpeg@f_auto?token=44616e0cb175d017671e8f43f36a9077)
vite的开启开发环境时,同是创建一个新项目,第一次会稍微慢一些,但也比webpack快很多,以后就更别说了,简直甩webpack好几条街,不过今天的主角不是vite,而是它的配置服务器工具:live server。
![](https://pics4.baidu.com/feed/94cad1c8a786c91725d1cfd9d29ceec639c757ae.jpeg@f_auto?token=caed5b86ce019d1cef7d8f472cb5f3c5)
01优势和使用场景
有人可能要说,它能有apache,稳定,插件多?它能nginx高效,抗并发吗?
就别说稳定和抗高并发了,live server压根就不支持动态语言比如:php,asp等,它只适合静态页面开发,不过这正适合前端开发一些临时项目,而且开启新服务,就只需运行一条命令就可以了。
我们时常会接到一些零碎的小任务,目录不能太集中,太集中不容易管理维护,而live server就完美地解决这些问题,不论路径在哪,什么端口,只需一条命令就能开启,如果有多个项目穿插进行,可以制作bat,一键运行多个临时环境,是不是想想都能笑出来。这可是apache,nginx不好实现的东西。说了这么多,还是先来看看怎么安装的吧。
02安装
从安装的方式上来说,可以分为2种:
1.live server是有环境依赖的,它依赖NODE环境,不过这对于当下的前端工程师来说,是必备工具,但是对于小白来说,还是有必要说一下NODE环境的安装方法,不用担心,windows版的node安装超级简单的。
百度搜索-node ,点击官方网站,下载对应的版本,下载完成,点击下一步下一步完成。
![](https://pics4.baidu.com/feed/b999a9014c086e06c58684f819a9e5fd0bd1cb86.jpeg@f_auto?token=b7e5b8f4f6c8cf6441207b4b4daf4b5c)
完成之后,只需win +r,输入cmd,npm install live-server -g,等待安装完成。
![](https://pics1.baidu.com/feed/21a4462309f790529ed3f0081b5249c37acbd566.jpeg@f_auto?token=96c9e9359ffa1567bed6c463d6873d6b)
2.如果你使用vscode编辑器,那就安装它就太简单了,只需在点击插件或ctrl+shift+x,搜索live server,找到插件,直接点击安装即可,则不需要安装依赖,因为插件里包含内置了依赖包。
![](https://pics5.baidu.com/feed/5366d0160924ab188507da6a145b78c47a890b87.jpeg@f_auto?token=f45072eb0fbd744ad356d872b77b3327)
至于你选择哪种方法安装,看你需要了。如果你平时开发就用vs code,哪没得说,就选第二种就对了。但这两种安装方法,在使用上是有细微差别的,我会在用法里详细介绍。
03用法
其实用法上的区别,就在依赖环境的变化,相信聪明的你,应该也可以推理出来,比如VScode的安装的插件只能使用在vscode的环境里,在外部是不能使用,而第一种方法,我们是在系统里安装了依赖,也就是,live-server可以在系统使用,使用的范围自然比第一种大,至于你用哪种?就看你的需要了
先说第1种用法,如果想实现不论在什么路径下,都能运行live-server命令,还需一一步操作:设置系统环境变量(最便捷的设置环境变量的方法,没有之一)。
具体操作:按windows键,键盘输入:huanjing,然后回车,ctrl+n, 按p快速定位Path,双击打开,新建,录入路径:C:\Users\wusil\AppData\Roaming\npm\,确定。
![](https://pics6.baidu.com/feed/0e2442a7d933c895ed224866fab2edf9830200fd.jpeg@f_auto?token=d3ae7e6bf233305e29d8d39ab6c06631)
操作完成之后,我们就可以愉快的使用live-server,下面介绍几个常用的参数:
-
--port=端口号,默认为8080,若使用,会随机生成一个端口号(是不是很贴心)
-
--open=路径地址,不输入,默认是当前命令的环境路径,
-
--wait=时间间隔,默认为100ms,(原理防抖)可以自由设定时间,单位ms
-
--proxy=路由地址,配置代理地址,这也是前端比较常用的功能。
注:命令的环境路径,是指cmd\powerShell\bash里的默认路径。
![](https://pics1.baidu.com/feed/d62a6059252dd42a48610d61189ac5bcc8eab83e.jpeg@f_auto?token=55863b32f1dc9a59bd231ed4f0f4760a)
这些都是我常用的几个,其它你可以参考官方,当然,如果临时服务环境,有一些公共的配置项的话,你可以制作一个公共配置文件,.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" ,保存。
![](https://pics2.baidu.com/feed/5243fbf2b211931347a871d6709992de90238d1c.jpeg@f_auto?token=7c276550e34fe197bbfba760d4ae113f)
若遇到无法保存的情况,可以下方留言,因为文章篇幅的原因,不再过多赘述了。
至于VScode插件的用法吗?就一句话可以说明白:
选择项目下的文件,右键,open in live serve,点击即可。
![](https://pics6.baidu.com/feed/0bd162d9f2d3572caf02064a96b2fd2e60d0c3eb.jpeg@f_auto?token=b112c3329eb90a0fc2a59e6310d63015)
好了,今天的文章就到这了,希望你从中有所收获,如果对你有些许帮助的话,别忘了三联,关注+转发+点赞,你的肯定是对我最大的支持。
标签:插件,vscode,路径,server,live,安装,liveserver From: https://www.cnblogs.com/aishuishuiADgai/p/16825978.html