Live Server 不是热更新工具，仅提供简易 HTTP 服务器并执行整页刷新（location.reload()），不支持 HMR；其核心作用是解决 file:// 协议限制，如 fetch 跨域、import 失败、相对路径解析错误等，通过启动 http://127.0.0.1:5500/ 绕过限制，但不编译、不打包、不处理模块语法，且默认不支持局域网访问或监听 .ts/.json 等非默认文件。
Live Server 插件不是热更新工具，它只是个简易 HTTP 服务器，只做整页刷新（location.reload()），不支持 HMR；局域网访问需手动配置，且默认不开启。
Live Server 的真实作用：解决 file:// 协议限制
浏览器直接双击打开 HTML 文件走的是 file:// 协议，这会导致：fetch 被跨域拦截、import 失败、相对路径解析错、service worker 无法注册。Live Server 启动后提供 http://127.0.0.1:5500/ 这类地址，绕过全部限制。
- 它不编译、不打包、不处理模块语法（比如
import从node_modules） - 它不监听
.ts、.json或构建产物目录（如dist/），除非你手动改liveServer.settings.fileExtensions - 它注入的 WebSocket 脚本只在
</body>前插入——所以<body>缺失、被注释或写成<body >（多空格）都会让刷新失效
为什么改了文件浏览器不刷新？常见失效链
不是插件坏了，而是某个环节断了注入或 reload 触发链：
-
<body>标签不存在或被注释 → 注入脚本失败 → 没 WebSocket 监听 → 不触发reload -
<script>标签带defer或type="module"→ 浏览器执行时机变化 → 注入脚本可能被跳过或执行顺序错乱 - 浏览器 DevTools 关着 →
Disable cache没生效 → 你看到的还是缓存的旧 CSS/JS - HTML 在子目录（如
src/index.html），但你用 VS Code 打开的是项目根目录 → Live Server 根路径是项目根，/css/style.css就得放在项目根下的css/，不是src/css/
怎么让局域网设备（手机、平板）也能访问？
Live Server 默认只绑定 127.0.0.1，外部设备连不上。必须显式放开：
- 打开 VS Code 设置（
Ctrl+,），搜liveServer.settings.host，值改为0.0.0.0 - 确保
liveServer.settings.port设的端口（如5500）没被防火墙拦截；Windows 用户常需在「高级安全 Windows 防火墙」里放行该端口 - 手机浏览器访问
http://<你的电脑局域网IP>:5500/，不是localhost或127.0.0.1；查 IP 可在终端运行ipconfig（Win）或ifconfig（macOS/Linux） - 别用
file://地址扫码——它根本不会走 Live Server，自然也没刷新
它和 Vite/Webpack 的本质区别在哪？
Live Server 是“静态文件托管 + 强制刷新”，Vite 是“响应式模块系统 + 真 HMR”。两者定位完全不同：
- Live Server 修改
index.html→ 刷新整页；改一个button.js→ 也刷新整页；状态、滚动位置、表单输入全丢 - Vite 修改
button.js→ 只替换那个模块的 JS，组件实例保留，CSS 更新也不闪屏 - Live Server 不解析
import，不处理@/别名，不支持env变量；Vite 全都支持 - 如果你的项目已有
vite.config.ts和npm run dev，就别再右键点 “Go Live”——两个服务同时跑，端口冲突、资源加载混乱、刷新行为打架
最易被忽略的一点：Live Server 启动后，浏览器地址栏必须是 http:// 开头，且域名/IP 必须和 VS Code 状态栏显示的一致；任何偏差（比如手输错端口、用了 https、漏了末尾 /）都会导致 WebSocket 连接失败，刷新静默失效。
