安裝插件 web Preview

啟動vue項目

打開預覽

ctrl + shift + p 之后輸入并選擇 Open Web Preview

即可看到預覽窗口，但此時明明我的頁面是有內容的，但是窗口卻空白的。

因為默認訪問端口是3000，我們將其修改為vue項目默認的5173端口即可。

點擊一下預覽窗口可以看到預覽工具欄：

再點擊一下搜索，發現此時端口是3000，改為5173

回車發現預覽窗口有內容了：

后面修改vue文件之后ctrl+s保存可以立即預覽結果了~

配置默認端口

按照上面的步驟可以達到目的了，但是每次打開預覽時都要改端口比較麻煩，為此我們直接改一下配置文件

ctrl + shift + p 之后輸入setting關鍵字選擇用戶配置json文件

增加一行并保存文件

"webPreview.url": "http://localhost:5173"

后續重新打開預覽窗口自動訪問5173端口了，搞定！