vscode不运行html，需http服务器实现热更新；误用file://协议导致页面不刷新，应使用http://协议；推荐用内置集成浏览器快速预览或live server插件启动本地服务，复杂项目则需vite等支持hmr的工具。
VSCode 本身不“运行” HTML，它只编辑；真正让 HTML 动起来的是本地 HTTP 服务器。热更新（自动刷新）不是 VSCode 自带能力，而是靠插件或内置功能触发的——关键在你用的是 file:// 协议还是 http:// 协议。
为什么改了 HTML 保存后页面没变？
绝大多数情况是误用了 file:// 协议：双击打开、拖文件进 VSCode、右键“Open in Default Browser”。这会导致：
-
net::ERR_FILE_NOT_FOUND（JS/CSS 路径错，但控制台不报或报得晚） -
Access to script at 'file://' has been blocked（fetch、import、localStorage 全挂） - 改完代码按 Ctrl+S，浏览器毫无反应——因为根本没监听文件变化
解决办法只有一个：确保地址栏是 http://127.0.0.1:5500/index.html 这类，而不是 file:///C:/.../index.html。
用内置“集成浏览器”最快预览（VSCode ≥1.121）
不用装插件，不启服务，适合纯 HTML+CSS+基础 JS 的快速验证：
- 打开 HTML 文件后，点编辑器标签右上角的
?️图标 - 或右键资源管理器里的文件 →
Open in Integrated Browser - 或右键已打开的编辑器标签 → 同样选该选项
注意：Integrated Browser 是基于 Chromium 的轻量内嵌视图，支持自动刷新（保存即更新），但不提供网络调试能力，也不支持跨域请求或模块导入——它只是个“看效果”的窗口，不是开发服务器。
用 Live Server 插件实现真·本地服务 + 自动刷新
这是目前最通用、最稳定的方案，尤其当你写了 import、用了 fetch、或引用了相对路径的 CSS/JS 时必须用它：
- 安装插件：
Live Server（作者是ritwickdey，别装错名字相近的） - 必须通过
文件 → 打开文件夹加载整个项目根目录，单个 HTML 文件拖入无效 - 右键
index.html→Open with Live Server（比点状态栏Go Live更可靠） - 默认端口
5500，冲突时会自动尝试5501，也可在设置里改liveServer.settings.port
它启动的是真实 HTTP 服务，所以所有现代 Web API 都能用；但要注意：它默认只监听 .html 文件变更，改 .css 或 .js 不一定触发刷新（部分版本支持 CSS 热重载，但不稳定）。
需要保留状态、局部替换 CSS、不跳转路由？换 Vite
Live Server 只是整页刷新，console.log 清空、表单输入丢失、React/Vue 组件状态归零——这不是缺陷，是设计使然。真要 HMR（Hot Module Replacement），就得用构建工具：
- 新项目：运行
npm create vite@latest，选框架，npm install && npm run dev - 已有项目含
import、TS、JSX 或 SCSS？直接关掉 Live Server，用原生开发命令启动 - Vite 默认地址是
http://127.0.0.1:5173/，不自动开浏览器，首次需手动访问
判断依据很简单：你写没写 import 或 export。写了，就别硬撑 Live Server；没写，Live Server 或内置预览都够用。别被“热更新”这个词带偏——先分清你要的是“看样式”还是“调逻辑”。（截至2026年8月25日）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
