Live Server插件是VS Code中最可靠的HTML实时预览方案，通过启动本地HTTP服务（如http://127.0.0.1:5500）解决file://协议下的跨域、路径和ES模块导入问题，保存即刷新，但不支持HMR或构建流程。
Live Server 插件是当前最稳的实时预览方案
VS Code 本身不内置 HTML 实时刷新功能，Live Server 是社区验证过最可靠的选择。它起一个本地 HTTP 服务（非 file:// 协议），解决跨域、相对路径、ES Module 导入等原生双击打开 HTML 时必然失败的问题。
安装后右键 HTML 文件 → “Open with Live Server”，自动在浏览器打开 http://127.0.0.1:5500/xxx.html，保存即刷新。
- 必须用 HTTP 协议：否则
fetch()、import、XMLHttpRequest全部报错 - 端口可改：点击右下角状态栏的
5500→ “Change Port” → 输入新数字 - 不支持多根工作区自动识别入口：如果项目有多个 HTML，每次要手动右键对应文件
别用“Open in Default Browser”插件替代 Live Server
这个插件只是模拟双击打开，走的是 file:// 协议。你看到页面“能显示”，但只要加一行 fetch('./data.json') 或 <script type="module">，立刻控制台报 CORS policy 或 Not allowed to load local resource。
常见误判场景：
立即学习“前端免费学习笔记（深入）”；
- 静态文字+图片能看 → 就以为“预览没问题”
- 用
console.log测试 JS 执行 → 忘了异步请求根本发不出去 - 换浏览器再试一次 → Chrome 和 Edge 对
file://的限制越来越严，Firefox 略宽松但也不保证兼容
需要热重载（HMR）或构建流程时，Live Server 就不够用了
Live Server 只做文件监听 + 刷新，不编译、不转译、不打包。如果你用了 Vite、Webpack、Parcel 或写的是 .vue/.svelte，就该关掉它，改用对应工具的 dev server。
比如 Vite 项目：
- 删掉
Live Server的右键菜单干扰 - 终端运行
npm run dev（默认开http://127.0.0.1:5173/） - 它自带 HMR：改 CSS 不刷新页面，改 JS 模块只更新组件
-
Live Server的端口（如 5500）和 Vite（5173）不能共存，会提示端口占用
调试时发现页面没更新？先看这三处
不是插件坏了，大概率是缓存或路径问题：
- 浏览器地址栏还是
file:///开头 → 没真正用上Live Server，检查右键菜单是否点错了 - 修改保存后浏览器没反应 → 检查 VS Code 右下角有没有 “Live Server” 正在运行的提示，没有就说明服务没起来
- 刷新后样式/JS 还是旧的 → 强制清空缓存：Chrome 按
Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac），别只点刷新按钮
真实项目里，HTML 引用的 ./css/index.css 路径在 file:// 下可能“碰巧”加载成功，换到 http:// 就 404——这种差异最容易漏测。
