基本概念

Live Server：一個具有實時加載功能的小型服務(wù)器，可以使用它來破解html/css/javascript，但是不能用于部署最終站點。也就是說我們可以在項目中實時用live-server作為一個實時服務(wù)器實時查看開發(fā)的網(wǎng)頁或項目效果。

優(yōu)點

1：一鍵安裝，實現(xiàn)自動刷新，架設(shè)本地服務(wù)器環(huán)境。

2：比起 gulp 構(gòu)建 實現(xiàn)自動刷新，架設(shè)本地服務(wù)器環(huán)境，需要安裝自動刷新插件gulp-livereload，架設(shè)本地服務(wù)器插件gulp-server。Live Server簡直一步到位。只要安裝Live Server，就可以解決自動刷新和架設(shè)本地服務(wù)器環(huán)境的問題。

官網(wǎng)地址

http://tapiov.net/live-server/

GitHub地址

https://github.com/tapio/live-server?

npm地址

https://www.npmjs.com/package/live-server

運行原理

Live Server是一個簡單的節(jié)點應(yīng)用程序，用于工作目錄及其子目錄。它也監(jiān)視文件的變化，當(dāng)這種情況發(fā)生時，它通過web套接字連接向瀏覽器發(fā)送消息，指示它重新加載。為了讓客戶端支持這個，服務(wù)器為每個請求的html文件注入一小段JavaScript代碼。這個腳本建立了web套接字連接并監(jiān)聽重載請求。通過從DOM中查找引用的樣式表，并觸發(fā)瀏覽器再次獲取并解析它們，可以刷新CSS文件，而無需整頁重新加載。

打開chome控制臺，發(fā)現(xiàn)多了一小段JavaScript代碼

安裝

一、在VS Code擴展中搜索Live Server，并安裝

二、打開命令面板，輸入settings，點擊首選項

三、搜索Live Server配置項，將左側(cè)需要修改的配置項復(fù)制到右側(cè)用戶設(shè)置并修改

Live Server的配置

{ "liveServer.settings.port": 8080, //設(shè)置本地服務(wù)的端口號 "liveServer.settings.root": "/", //設(shè)置根目錄，也就是打開的文件會在該目錄下找 "liveServer.settings.CustomBrowser": "chrome", //設(shè)置默認(rèn)打開的瀏覽器 "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222", "liveServer.settings.NoBrowser": false, "liveServer.settings.ignoredFiles": [//設(shè)置忽略的文件".vscode/**","**/*.scss","**/*.sass" ] }

?

使用

設(shè)置完畢后，重啟vscode，并選擇需要瀏覽的文件，右鍵開啟服務(wù)

其他開啟方法

1、在窗口的最底部有Go Live可以點擊，一旦點擊，就會自動在瀏覽器中打開HTML文件

2、快捷鍵?

(alt+L, O)?打開服務(wù)? ?

(alt+L, C)?關(guān)閉服務(wù)

3、按F1,然后在輸入欄中輸入

Live Server: Open Live Server?to start a server ?打開服務(wù)，

或者?Live Server: Close Live Server?to stop a server 關(guān)閉服務(wù)

可以在瀏覽器中瀏覽網(wǎng)頁

并且在VS Code保存，瀏覽器即可自動刷新

注意事項

1、注意端口占用?

參考文章

https://blog.csdn.net/zhouwei_doris/article/details/80604604

https://www.jianshu.com/p/6661aaebf412

https://www.jianshu.com/p/6519807b79f2

https://blog.csdn.net/qq_36770063/article/details/81128851

https://blog.csdn.net/u010078133/article/details/78600496

總結(jié)

以上是生活随笔為你收集整理的VS Code——Live Server的简介、安装与使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。