VSCode需借助扩展实现保存即刷新，Live Server是最简方案，它起本地HTTP服务解决跨域问题并自动注入LiveReload脚本；项目含构建工具时应使用npm run dev等真实开发服务器；注意协议、缓存和服务Worker导致的刷新失效。
VSCode 本身不内置浏览器实时预览功能，但通过轻量扩展和简单配置就能实现保存即刷新——关键不在装多少插件，而在选对方案、避开自动重载失效的常见陷阱。
Live Server 扩展为什么是最简选择
它直接起一个本地 HTTP 服务（非 file:// 协议），解决浏览器跨域限制导致的 AJAX / 模块加载失败问题；同时支持自动注入 LiveReload 脚本，无需改项目代码。
- 安装后右键 HTML 文件 → “Open with Live Server”，自动在默认浏览器打开
http://127.0.0.1:5500/xxx.html - 修改文件保存，页面自动刷新；如需禁用自动刷新，可在 VSCode 设置中关闭
liveServer.settings.donotShowInfoMsg后手动查日志确认是否监听成功 - 注意：若项目含
index.html但不在根目录（比如在src/下），右键时需明确选中该文件，否则可能打开空页或 404
用 npm run dev 启动真实开发服务器更可靠
当项目已有构建工具（Vite、Webpack、Parcel），Live Server 只能预览静态 HTML，无法处理 import、环境变量、CSS 预处理器等。此时必须用项目自身命令。
- Vite 项目：终端执行
npm run dev，默认访问http://127.0.0.1:5173/，保存即 HMR（热更新），比全量刷新快得多 - 确保
package.json中scripts.dev命令正确（例如vite或vite --host），否则可能只监听 localhost 导致局域网设备无法访问 - VSCode 内置终端（
Ctrl+`）启动后，不要关掉窗口——关闭终端等于终止服务
浏览器里按 F5 刷新没反应？先看这三处
不是所有“刷新”都触发重新加载，尤其启用缓存或服务 Worker 后，表现会反直觉。
立即学习“前端免费学习笔记（深入）”；
- 检查地址栏是否为
http://开头（Live Server 或 dev server）；若仍是file:///，说明没用对方式，浏览器会禁用 JS 模块、fetch 等特性 - 打开开发者工具 → Network 标签页，勾选
Disable cache（仅在 DevTools 开着时生效） - 如有
sw.js或注册了 Service Worker，点 Application → Service Workers →Unregister，否则旧 JS/CSS 可能被强制缓存
真正卡住的往往不是怎么开预览，而是没意识到：静态文件双击打开 ≠ 可运行的 Web 应用，协议、缓存、构建阶段三者只要一个错位，页面就看似“不动”。
