VS Code 自带的“浏览器预览”功能不存在实时刷新能力，仅用 file:// 协议打开文件；Live Server 扩展通过启动本地 HTTP 服务器实现保存即刷新、支持模块导入与 AJAX，是解决该问题的事实标准。
VS Code 自带的“浏览器预览”功能其实并不存在——它没有内置实时刷新 HTML 的能力，所谓“预览”只是用系统默认浏览器打开文件，改完必须手动刷新。要实现保存即刷新、热重载效果，得靠扩展和配套配置。
Live Server 扩展是当前最可靠的选择
VS Code 官方市场中 Live Server（作者 Ritwick Dey）是解决该问题的事实标准。它启动一个本地 HTTP 服务器，并在文件保存时自动通知浏览器重载页面，支持 HTML/CSS/JS 实时反馈。
- 安装后右键 HTML 文件 →
Open with Live Server，会自动在浏览器中打开http://127.0.0.1:5500/xxx.html - 修改并保存文件，页面会在 100–300ms 内自动刷新，无需任何额外操作
- 不依赖
file://协议，避免因跨域导致的 AJAX、模块导入（import）等失败 - 支持自定义端口、根路径、是否自动打开浏览器等，通过 VS Code 设置中的
liveServer.settings配置
为什么不能直接用“Open in Default Browser”？
VS Code 内置的 Open in Default Browser 命令（或右键菜单）本质是调用 file:// 协议打开本地文件。这会导致：
- 现代浏览器（Chrome/Firefox/Edge）默认禁用
XMLHttpRequest、fetch等 API 的本地文件访问，报错如net::ERR_FILE_NOT_FOUND或CORS policy: file:// URLs are not allowed - ES6 模块（
）无法加载本地import路径，提示Failed to load module script - 所有更改都需手动按
F5或点击刷新按钮，完全谈不上“实时”
其他替代方案对比（不推荐但需知道）
除 Live Server 外，有人尝试用 Browser Preview（Microsoft 官方扩展）或 Preview on Web Server，但实际体验差距明显：
立即学习“前端免费学习笔记（深入）”；
-
Browser Preview：仅提供内嵌浏览器窗格，仍基于file://，不解决跨域和模块加载问题，且不支持自动刷新 -
Preview on Web Server：已多年未更新，与新版 VS Code 兼容性差，启动失败率高 - 命令行工具（如
python -m http.server或npx serve）：可行但每次都要切终端、记端口、手动打开 URL，违背“开箱即用”预期
/* 示例：使用 Live Server 后，以下代码能正常运行 */
真正卡住新手的往往不是“怎么装插件”，而是没意识到 file:// 和 http:// 的根本区别。只要记住一点：凡涉及 JS 模块、本地 API 请求、Service Worker，就必须走 HTTP 服务——而 Live Server 就是最轻量、最稳的那条路。
