Live Server 需通过 http://127.0.0.1:5500/ 访问且文件必须已保存为 .html、位于根目录或设为活动标签页；子目录资源需用根相对路径；刷新失效常因缓存、安全插件拦截或未手动保存。

Live Server 插件本身不监听 HTML 文件内容变更后自动刷新，必须确保页面是通过它启动的服务器地址访问（如 http://127.0.0.1:5500/），而非直接双击打开的 file:// 协议路径。

为什么点“Go Live”没反应或刷新失效

常见原因是当前文件未被 Live Server 识别为可服务入口：它默认只对根目录下的 index.html、default.html 或当前打开的 HTML 文件生效，且要求文件已保存（未保存的临时标签页不会触发服务）。

• 确认文件已保存，扩展名为 .html（不是 .htm 或无后缀）
• 右键点击编辑器内 HTML 文件 → 选择 Open with Live Server，不要只点右下角状态栏的 Go Live
• 如果项目有多个 HTML，Live Server 默认只服务当前活动标签页对应的文件；想固定服务某个入口，可在工作区根目录放一个 index.html
• 检查 VSCode 右下角状态栏是否出现 Port: 5500（或其他端口号）——没出现说明服务根本没起来

如何让子目录 HTML 也被正确预览

Live Server 默认以当前打开的文件所在目录为服务器根路径。比如你打开了 src/pages/about.html，那么浏览器地址会是 http://127.0.0.1:5500/pages/about.html，此时相对路径引用的 CSS/JS 仍按 src/ 为基准解析，容易 404。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

• 推荐做法：在 VSCode 中打开整个项目文件夹（File → Open Folder），再打开任意 HTML 文件并启动 Live Server，它会以该文件夹为根服务
• 若必须从子目录启动，可在 about.html 中把资源路径写成根相对路径，例如 <link rel="stylesheet" href="/css/style.css">（注意开头的 /）
• 不建议修改插件设置里的 liveServer.settings.root，容易和实际文件结构错位，反而增加调试成本

刷新不生效的几个隐蔽原因

即使地址正确、服务运行中，也可能看不到更新，问题往往出在缓存或插件行为细节上。

• 浏览器强制刷新（Ctrl+F5 或 Cmd+Shift+R）可绕过内存缓存，但无法解决 Live Server 自身的静态资源缓存逻辑
• Live Server 默认启用 Cache-Control: max-age=3600 响应头，HTML 文件本身不缓存，但 JS/CSS 会——修改这些文件后需手动刷新，或禁用缓存（开发者工具 → Network → 勾选 Disable cache）
• 如果用了 Webpack/Vite 等构建工具，别同时开 Live Server，二者端口和热更机制冲突，会导致白屏或 404
• 某些安全插件（如 uBlock Origin）会拦截 localhost 的 WebSocket 连接，导致 Live Server 的自动刷新信号收不到，可临时禁用测试

最常被忽略的一点：Live Server 的实时刷新只针对「保存动作」，它不会监听文件系统级的外部修改（比如 Git checkout 切分支后文件变了但没在 VSCode 里手动保存），务必养成改完就 Ctrl+S 的习惯。