Live Server 不能实现模块级热更新（HMR），仅支持整页刷新；它通过注入 WebSocket 脚本监听文件变化并触发 location.reload()，适用于纯 HTML/CSS/JS 静态项目，不处理模块解析、打包或状态保持。
VSCode 本身不提供热更新能力，它只负责编辑；真正实现“保存即生效”的是外部服务——Live Server 适合静态页，Vite/Webpack 才支持 HMR（模块级热替换）。
Live Server 能不能热更新？
不能。Live Server 只做整页刷新（location.reload()），不执行 HMR。它起的是一个简易 HTTP 服务器，解决 file:// 协议下 import 失败、相对路径解析错、fetch 被拦截等问题。
- 适用场景：纯 HTML/CSS/JS 小项目、原型页、教学示例
- 常见错误现象：
Uncaught SyntaxError: Cannot use import statement outside a module—— 这说明你用file://直接双击打开了 HTML，而不是通过 Live Server 启动的http://127.0.0.1:5500/ - 端口冲突时，改
liveServer.settings.port即可，比如设为8080；别和npm run dev默认的5173或3000混用 - HTML 若不在项目根目录（如在
src/index.html），右键打开时服务根目录就是src/，./assets/logo.png会去src/assets/找，不是项目根
Vite 为什么比 Live Server 更适合现代前端项目？
因为 Vite 原生支持 ES 模块、JSX、TypeScript、CSS 预处理，并在保存时只替换变更模块（HMR），不重载整个页面，状态也不丢失。
- 启动命令是
npm run dev，默认地址http://127.0.0.1:5173/；首次需手动访问，加server.open: true到vite.config.ts可自动打开 - 静态资源放
public/下（如public/favicon.ico），浏览器直接通过/favicon.ico访问，路径不带src/或public/ - 若遇到
404或 “无法加载模块”，先检查浏览器地址栏是不是http://开头；再确认import路径是否用了./（相对）而非/（绝对根路径） - 不要在 Vite 项目里同时开 Live Server —— 两个 HTTP 服务监听不同端口，但容易误操作右键点错文件，导致打开旧链接
自动保存怎么配才不翻车？
VSCode 的 files.autoSave 必须设对作用域，否则在多根工作区或远程开发（WSL/SSH）中会失效。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
"files.autoSave": "afterDelay"+"files.autoSaveDelay": 1500，太短（如 300）可能频繁写磁盘卡顿，太长（如 5000）失去意义 - 配置必须写进项目级
.vscode/settings.json，而不是用户级设置；图形界面改的往往是全局设置，对当前项目无效 - 如果用了 Prettier，关掉
editor.formatOnSave，改用editor.codeActionsOnSave配"source.formatDocument"，避免格式化中途保存导致语法错误 -
files.autoSaveExclude要显式排除构建产物，比如"**/dist/**"、"**/node_modules/**"，不然保存时可能触发重复构建
真正卡住的地方，往往不是插件装没装，而是没意识到 file:// 和 http:// 的行为天差地别，或者把 Live Server 当成 Vite 用——前者是静态服务，后者是开发服务器+构建工具。选哪个，取决于你代码里有没有 import、jsx、defineProps 这类东西，而不是“哪个看起来更高级”。
