VS Code——Live Server的簡介、安裝與使用

基本概念

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

 

優點

1：一鍵安裝，實現自動刷新，架設本地服務器環境。

2：比起 gulp 構建 實現自動刷新，架設本地服務器環境，需要安裝自動刷新插件gulp-livereload，架設本地服務器插件gulp-server。Live Server簡直一步到位。只要安裝Live Server，就可以解決自動刷新和架設本地服務器環境的問題。

 

官網地址

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

GitHub地址

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

npm地址

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

 

運行原理

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

打開chome控制台，發現多了一小段JavaScript代碼

 

 

 

安裝

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

 

 

 

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

 

 

 

三、搜索Live Server配置項，將左側需要修改的配置項復制到右側用戶設置並修改

 

 

 

Live Server的配置

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

 

 

使用

設置完畢后，重啟vscode，並選擇需要瀏覽的文件，右鍵開啟服務

 

 

 

其他開啟方法

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

2、快捷鍵 

(alt+L, O) 打開服務   

(alt+L, C) 關閉服務

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

Live Server: Open Live Server to start a server  打開服務，

或者 Live Server: Close Live Server to stop a server 關閉服務

可以在瀏覽器中瀏覽網頁

並且在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
————————————————
版權聲明：本文為CSDN博主「Starzkg」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_43272781/article/details/103875811