Live Server 是最稳定开箱即用的 VSCode 自动刷新插件,仅监听 HTML 类文件保存事件,CSS/JS 修改不触发刷新;启动需打开整个文件夹工作区、确保 index.html 已保存且扩展名为 .html、右键编辑器标签页文件;根路径为 HTML 所在目录,路径错误导致 404;需禁用浏览器缓存及广告拦截插件以避免刷新失效。

Live Server 是目前最稳定、开箱即用的 VSCode 自动刷新插件,无需构建工具、不依赖 Node.js 运行时,改完 HTML 保存就刷新——但 CSS/JS 修改默认不触发刷新,这点必须提前知道。
Live Server 为什么点“Go Live”没反应
状态栏没出现 Port: 5500,说明服务根本没启动,不是慢,是失败了:
- 当前必须打开的是**整个文件夹工作区**(File → Open Folder),不能只拖一个
index.html文件进去 -
index.html必须已保存,且扩展名是.html(不是.htm、.txt或无后缀) - 右键操作要针对**编辑器标签页里的文件**,不是资源管理器里未打开的文件(后者路径解析常失败)
- 端口被占时它会自动换到
5501,但浏览器地址栏可能还停在旧链接,务必看右下角提示的实际 URL
改了 CSS 或 JS 页面不刷新,不是 bug 是设计
Live Server 默认只监听 .html、.htm、.xhtml、.php 这类模板文件的保存事件,style.css 或 script.js 改完保存,页面不会自动刷新——这是明确的行为,不是配置遗漏:
-
liveServer.settings.refreshOnEdit设置对 CSS/JS 无效,只影响 HTML 类型 - 最轻量解法:装插件
Refresh Page on Save,它绕过 Live Server,直接监听所有后缀并执行强制刷新 - 若需真正热更新(比如改一行 CSS 不重刷整页),得换工具:用
vite(npm create vite@latest)或webpack-dev-server,它们支持 HMR
路径 404 和样式丢失的根本原因
Live Server 的根路径不是你项目文件夹,而是**当前 HTML 文件所在目录**。比如你在 src/pages/index.html 右键启动,服务器根路径就是 src/pages/,此时 ./css/main.css 会被请求为 http://127.0.0.1:5500/css/main.css,但实际文件在 src/css/main.css —— 404 就这么来的:
- 推荐做法:把入口 HTML 放到项目根目录(如
index.html),再右键启动 - 若必须从子目录启动,CSS/JS 路径写成根相对路径:
/css/main.css(开头带/) - 避免用
<base href="/">,它会强行覆盖所有相对路径逻辑,调试时先删掉 - 别用
file://协议双击打开,浏览器会拦截本地脚本/CSS;Live Server 提供的是http://,本质不同
真正容易被忽略的点是缓存和安全插件:Chrome 开发者工具 Network 标签页勾选 Disable cache 才能绕过 Live Server 对 CSS/JS 的 Cache-Control: max-age=3600 响应头;uBlock Origin 等插件会静默拦截 localhost 的 WebSocket 连接,导致刷新信号收不到——临时禁用即可验证。


















