VSCode怎么预览HTML页面_VSCode浏览器预览网页方法教程【简单】

陆砚码

2026-11-04 • 👁 0人浏览过

Live Server是VS Code唯一靠谱的HTML实时预览方案，它启动本地HTTP服务（如http://127.0.0.1:5500）绕过file://协议限制，支持保存即刷新；必须安装Ritwick Dey原版插件，右键HTML文件选择“Open with Live Server”，且需以文件夹方式打开项目。 VS Code 本身不带 HTML 预览功能，双击或右键“在浏览器中打开”走的是

file://

协议，只要页面里有

fetch()

、

import

或相对路径引用 JSON/CSS/JS，八成会报错——这不是你代码写错了，是协议限制。 Live Server 是唯一靠谱的实时预览方案它起一个真正的本地 HTTP 服务（比如

http://127.0.0.1:5500

），绕过浏览器对

file://

的各种封锁。安装后右键 HTML 文件 →

Open with Live Server

，保存即刷新，不用手动点刷新按钮。必须装 Ritwick Dey 发布的原版，扩展 ID 是

ritwickdey.LiveServer

；别选同名但下载量低、作者不明的“精简版”或“增强版” 端口冲突时，点 VS Code 窗口右下角的

5500

→

Change Port

换个数字就行如果项目有多个 HTML（比如

index.html

和

admin.html

），Live Server 不会自动识别入口，每次得手动右键对应文件再开状态栏出现

Go Live

按钮，只在当前编辑器打开了 HTML 文件且文件已保存的前提下才激活为什么不能用 View in Browser 或 Open in Default Browser？这类插件只是模拟双击打开，底层仍是

file://

协议。你看到页面渲染出来了，不代表它能正常工作。

fetch('./data.json')

→ 控制台报

Not allowed to load local resource