最稳方式是安装 Live Server 插件并用其启动 HTML 文件，确保含 标签，避免 file:// 协议导致的跨域与路径解析错误。
用 Live Server 插件打开 HTML 文件最稳
VS Code 本身不带浏览器预览功能，直接双击 HTML 文件会用系统默认方式打开（可能不是实时刷新），真正靠谱的做法是装 Live Server 插件。它起一个本地 HTTP 服务，自动刷新页面，还能处理相对路径、CSS/JS 热更新这些事——比右键“Open with Live Server”菜单项更可靠的是确保你在 HTML 文件里有 标签，否则插件可能静默失败。
常见错误现象：Cannot GET / 错误、点击按钮没反应、图片路径 404；本质是文件被当成本地 file:// 协议打开，跨域或相对路径解析出错。
- 安装插件后，右键编辑器里的 HTML 文件 →
Open with Live Server - 别在资源管理器里右键 HTML 文件选“在浏览器中打开”，那走的是
file:// - 如果项目有
index.html，插件默认从它启动；没有的话会报错，得手动指定入口
命令行用 start 或 open 手动打开（适合非 HTML 文件）
纯文本、JSON、Markdown 这类非 Web 资源，没必要上服务器。Windows 和 macOS 都支持终端命令直接唤起默认浏览器打开文件，但路径必须是绝对路径，且要转义空格和特殊字符。
使用场景：快速查看生成的 report.json、调试时打开临时 output.html、检查打包后的静态资源。
- Windows：在 VS Code 集成终端运行
start "" "C:\path\to\file.html" - macOS：用
open -a "Google Chrome" "/Users/name/file.html" - Linux：
xdg-open /path/to/file.html - 注意：路径里有空格必须加英文双引号包裹，否则命令截断
open-in-browser 插件适合快捷键党
如果你经常要打开各种后缀的文件（比如 .svg、.pdf、.md），open-in-browser 比 Live Server 更轻量。它不启服务，只是调用系统命令把当前文件用浏览器打开，支持自定义浏览器和快捷键绑定。
参数差异：默认用系统默认浏览器，但你可以在设置里改成 "open-in-browser.default": "chrome"；它对 file:// 协议的限制比 Live Server 少，但也不解决跨域问题。
- 安装后按
Ctrl+Alt+O（Windows/Linux）或Cmd+Alt+O（macOS）即可 - 对
.html文件，它和 Live Server 效果一样“卡顿”，因为还是走file:// - 想让它打开
.svg时用 Chrome 而不是系统默认浏览器？改配置项"open-in-browser.customBrowser": "chrome"
为什么不能直接用 VS Code 内置的“Preview”功能
VS Code 1.85+ 加了内置的 HTML Preview 功能（右键 → Preview），但它本质是个只读 iframe，不执行 JS、不加载外部 CSS、不支持表单交互。看起来像打开了，其实连 console.log 都看不到。
性能影响：它不占端口、不启进程，快是快，但等于白看——尤其当你调试 Vue 组件、React JSX 或带 fetch 的脚本时，这个预览就是个花瓶。
- 适合场景：快速确认 HTML 结构、查排版、看纯静态内容
- 容易踩的坑：点了
Preview后发现按钮点不动、网络请求全挂起、控制台一片空白 - 真实开发中，只要文件里有哪怕一行
<script></script>，就该切回Live Server
真正麻烦的不是怎么打开，而是打开之后发现样式错乱、接口 404、图片不显示——这时候得先看地址栏是 http:// 还是 file://，再检查路径是不是写死了相对根目录。很多人卡在这一步，反复重装插件，其实只是少了个 ./ 或多写了 /。
