Live Server启动后页面没刷新,因默认只监听当前活动HTML文件;需在.vscode/settings.json中配置"liveServer.settings.file": "./src/index.html",路径须以./开头,否则导致空白页或404。

Live Server 启动后页面没刷新?检查 liveServer.settings.file 配置
Live Server 默认只监听当前活动的 HTML 文件,但如果你项目里有多个入口(比如 src/index.html 或 public/main.html),它可能根本没加载你改的那个文件。常见现象是:保存代码后浏览器毫无反应,控制台也没报错。
解决方法很简单:在项目根目录的 .vscode/settings.json 中显式指定入口:
{
"liveServer.settings.file": "./src/index.html"
}
注意路径必须以 ./ 开头,否则插件会当成绝对路径处理;如果路径错误,Go Live 按钮点击后浏览器打开空白页或 404,但不会提示具体原因。
Browser Preview 插件打不开调试面板?确认 browserPreview 配置项是否生效
Browser Preview 依赖 browserPreview.startUrl 决定初始加载地址。如果你本地服务跑在 http://localhost:3000,但设置里写的是 http://127.0.0.1:3000,预览窗口会白屏——它不自动做域名重定向。
建议统一用 localhost,并在 VSCode 设置中搜索 browserpreview 修改:
-
browserPreview.startUrl设为http://localhost:3000 -
browserPreview.defaultBrowser可选chrome或edge(不填则用系统默认) - 若使用
launch.json调试,确保type字段是"browser-preview",不是"pwa-chrome"
Open in Browser 插件右键没反应?检查 open-in-browser.default 是否被覆盖
这个插件最常踩的坑是:装完发现右键菜单里没有 Open in Default Browser。根本原因通常是工作区设置了空字符串或无效值。
打开设置,搜索 open-in-browser.default,确保右侧显示的是有效值,比如:
-
"chrome"(Windows/macOS 均可) -
"firefox"(需已安装) - 不要留空,也不要填
"default"—— 它不识别这个字符串
如果仍不生效,试试重启 VSCode;极少数情况是插件权限被 Workspace Trust 拦截,可在状态栏点击锁形图标临时允许。
为什么改了 HTML 但浏览器内容没变?先看是不是缓存或路径问题
三种插件都可能出现“改了代码却没更新”的假象,但原因完全不同:
-
Live Server:检查浏览器地址栏是否真是http://localhost:8080/xxx.html,而不是直接双击打开的file:///协议地址 -
Browser Preview:它不自动监听文件变化,必须手动刷新或配合live-server启动后才支持热更新 -
Open in Browser:纯静态打开,每次修改后必须手动刷新,且相对路径(如./css/style.css)在file://下容易 404
真正需要实时响应的场景,别图省事用双击或 Open in Browser —— 它们连本地服务器都没有,AJAX、模块导入、CORS 等全挂。


















