一、Live Server

之前挺好用的，但是今天發(fā)現(xiàn)Live Server可以運行到瀏覽器，但是保存代碼之后不能自動刷新瀏覽器了。經(jīng)過查資料，試了以下方法：

前提：在文件夾中運行

1、將vscode設(shè)置為自動保存
即：vscode中，文件-勾選“自動保存”；

2、vscode更改為以管理員身份方式運行
即：右擊vscode–屬性–“兼容性”選項卡–勾選“以管理員身份運行此程序”

3、配置環(huán)境變量
右擊資源管理器–高級系統(tǒng)設(shè)置–環(huán)境變量–選擇系統(tǒng)變量path–點擊編輯–添加C:\Program Files和C:\Windows\system32–確定…

4、取消勾選“setting:Use Browser Preview”
應(yīng)用商店中找到Live Server插件，右擊選擇“擴展設(shè)置”，在打開的界面中取消勾選“Open in Browser Preview inside VS Code，instead of default browser”

結(jié)論：試了以上幾種方法，都不能實現(xiàn)保存代碼自動刷新頁面，最終放棄使用Live Server。

二、preview on web server

此擴展提供在web服務(wù)器上執(zhí)行html預(yù)覽，當(dāng)保存文件時，會自動重新加載瀏覽器或側(cè)面板。即保存代碼，自動刷新頁面。
1、安裝
商店搜索“preview on web server”，點擊安裝按鈕

2、使用
右擊vscode內(nèi)容面板–選擇“vscode-preview-server:Launch on browser”。當(dāng)保存代碼后，頁面就會自動刷新。

3、其它
當(dāng)使用“preview on web server”運行代碼后，每次更新頁面都會出現(xiàn)“browsersync:connected”字樣，看起來挺礙眼的。解決辦法：給文件加css樣式。

#__bs_notify__ {display: none !important; }

總結(jié)

以上是生活随笔為你收集整理的vscode保存代码，浏览器自动刷新页面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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