html怎么加載live server插件

這篇文章主要介紹“html怎么加載live server插件”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“html怎么加載live server插件”文章能幫助大家解決問(wèn)題。

Live Server介紹

Live Server 是一個(gè)具有實(shí)時(shí)加載功能的小型服務(wù)器，使用它進(jìn)行 web 頁(yè)面開(kāi)發(fā)就好像在服務(wù)器上修改頁(yè)面一樣。同時(shí)它因?yàn)榫哂袑?shí)時(shí)加載功能，代碼修改后頁(yè)面會(huì)進(jìn)行實(shí)時(shí)刷新，可以直觀的看到網(wǎng)頁(yè)的修改效果。

安裝

在插件市場(chǎng)搜索 Live Server，點(diǎn)擊安裝即可。

使用

Live Server 不能加載單個(gè)頁(yè)面，只能加載文件夾?？梢孕陆ㄒ粋€(gè)文件夾，然后用 VSCode 打開(kāi)這個(gè)文件夾。就快要在這個(gè)文件夾內(nèi)進(jìn)行web頁(yè)面的開(kāi)發(fā)了。

在寫完代碼需要查看效果的時(shí)候，可以使用以下幾種方式運(yùn)行 Live Server：

右下角狀態(tài)欄有一個(gè) Go Live 按鈕，點(diǎn)擊即可運(yùn)行（啟動(dòng)后這個(gè)按鈕會(huì)變成 port：5500，這說(shuō)明服務(wù)器部署在 localhost：5500 的端口下，再次點(diǎn)擊這個(gè)按鈕可以停止運(yùn)行。此外也可以直接在瀏覽器通過(guò)訪問(wèn) localhost：5500 來(lái)查看網(wǎng)頁(yè)）。

在資源管理器右擊對(duì)應(yīng)的 html 文件后會(huì)出現(xiàn)如下右鍵菜單，open with Live Server 也可以啟動(dòng)服務(wù)器（也可以使用指令進(jìn)行執(zhí)行）。

在代碼文件中右擊，可以看到如下彈出菜單，與上一種方法相似，可以找到啟動(dòng)服務(wù)器的功能。不同的是，這個(gè)菜單還提供 Stop Live Server 的按鈕，使用后可以關(guān)閉服務(wù)器（也可使用指令執(zhí)行）。

注;可以同時(shí)啟動(dòng)多個(gè) Live Server，因此，端口號(hào)并不是固定的，但一般都是 5500 端口。另外，這個(gè)端口號(hào)可以設(shè)置，在 VSCode 配置文件中可以設(shè)置這個(gè)端口號(hào)，此處不多做深入介紹。

需要注意的坑：

在使用 Live Server 開(kāi)發(fā)頁(yè)面的時(shí)候需要特別關(guān)注 html 與 css 中引用路徑的問(wèn)題。有些時(shí)候引用路徑出現(xiàn)一些錯(cuò)誤的時(shí)候，如果使用本地打開(kāi)的方式會(huì)打開(kāi)失敗，而 Live Server 有時(shí)候會(huì)忽視這種錯(cuò)誤（能成功打開(kāi)）。這并不是 Live Server 的問(wèn)題，而是開(kāi)發(fā)者自己的問(wèn)題。所以在使用 Live Server 開(kāi)發(fā)完代碼后，最好使用本地打開(kāi)方式預(yù)覽一下頁(yè)面展示效果。

關(guān)于“html怎么加載live server插件”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。