VS Code + Live Server 可在5分钟内搭建带热更新的本地HTML预览环境，无需Node.js等运行时；双击打开HTML受限于file://协议，导致fetch、localStorage等API静默失败，而Live Server通过http://协议绕过限制并自动刷新。
直接用 VS Code + Live Server 插件，5 分钟内就能跑起一个带热更新的本地 HTML 预览环境，不需要装 Node.js、Python 或任何运行时。
为什么不能双击打开 HTML 文件就完事
浏览器对 file:// 协议有硬性限制：JS 的 fetch()、XMLHttpRequest、localStorage 在部分场景下会静默失败；CSS 中的 @import 或字体文件路径容易 404；更别说后续加 AJAX 或本地 API 调试——这些都不是你代码写错了，是协议权限模型不支持。
- 哪怕只写一行
<script>fetch('/api/data.json')</script>，双击打开必报错net::ERR_FAILED -
python3 -m http.server虽然能绕过，但没热刷新，每次改完还得手动 F5 - 手写
http-server或nginx属于过度配置，小项目没必要
VS Code + Live Server 实操三步走
这个组合默认监听文件变化、自动刷新、开箱即用，且所有操作都在图形界面完成，不碰命令行。
- 下载安装
VS Code（官网最新版，2026 年已内置Emmet和 UTF-8 默认编码） - 启动后点左侧扩展图标，搜
Live Server（作者 Ritwick Dey），点安装 - 新建文件夹 → 新建
index.html→ 输入!+Tab（触发 Emmet 生成完整 HTML5 结构）→ 右键编辑器空白处选Open with Live Server
浏览器会自动打开 http://127.0.0.1:5500/index.html，之后每次 Ctrl+S 保存，页面秒级刷新。
立即学习“前端免费学习笔记（深入）”；
端口冲突或中文路径打不开？两个关键检查点
Live Server 默认用 5500 端口，但 Windows 上 IIS、某些杀毒软件或旧版 Docker 可能占着；另外，VS Code 工作区路径含中文或空格时，部分系统会解析异常。
- 改端口：按
Ctrl+Shift+P打开命令面板 → 输入Preferences: Open User Settings (JSON)→ 添加"liveServer.settings.port": 8080 - 路径问题：把项目文件夹放到纯英文路径下（如
C:\dev\my-site），别放桌面或“文档”这类系统重定向目录 - 如果仍打不开，右键
index.html→ “Copy Relative Path”，粘贴到浏览器地址栏手动访问，确认是不是路径解析问题
真正卡住人的从来不是工具本身，而是 DOCTYPE 前多了一个不可见 BOM、编辑器悄悄用了 GBK 编码、或者路径里混用了反斜杠和正斜杠——这些细节不报错，但会让预览行为完全不可预测。
