live server默认仅监听html类文件（如.html、.htm）保存事件，不监听css/js变更，故修改style.css后页面不刷新；需手动配置插件或改用vite等支持hmr的工具。
Live Server 插件本身不监听 CSS/JS 文件变更后自动刷新页面，只对 HTML 类型文件保存生效；想改个样式就刷新，得手动配或换工具。
为什么改了 style.css 保存后页面没反应
Live Server 默认只监听 .html、.htm、.xhtml、.php 等模板类文件的保存事件，CSS 和 JS 文件修改后不会触发刷新。这不是 bug，是设计如此。
- 浏览器控制台看不到报错，但页面就是不更新 —— 先确认你改的是
.html文件 -
liveServer.settings.refreshOnEdit这个设置只影响 HTML 类型，对.css或.js无效 - 最稳的 workaround：装一个轻量插件如 “Refresh Page on Save”，它不依赖 Live Server，直接监听所有文件后缀并强制 F5
- 或者改用 Vite：运行
npm create vite@latest+npm run dev，改.css会 HMR（热模块替换），连 DOM 都不重刷
Open with Live Server 点了没反应，右下角没显示 Port: 5500
说明服务根本没起来，不是“慢”，是压根没启动成功。
- 检查 VSCode 左侧资源管理器：当前打开的必须是一个**文件夹工作区**，不能只是单个
.html文件（拖一个文件进去不行） - 确保文件已保存且扩展名是
.html（不是.txt、.htm或无后缀） - 右键菜单选的是编辑器内标签页上的文件，而不是资源管理器里未打开的文件 —— 后者可能路径解析失败
- 端口被占时 Live Server 会自动换到
5501，但浏览器可能还停在旧地址，务必看右下角状态栏实际提示的 URL - 某些安全插件（如 uBlock Origin）会拦截
localhost的 WebSocket 连接，临时禁用可验证是否为此原因
页面打开了但样式丢失、404 报 /css/main.css
根源在于路径解析基准和你想象的不一样：Live Server 是以**当前 HTML 文件所在目录为服务器根路径**，不是整个工作区根目录。
- 比如你在
src/pages/index.html右键 Open with Live Server，那服务根路径就是src/pages/，此时./css/main.css会被请求为http://127.0.0.1:5500/css/main.css，但文件其实在src/css/main.css—— 404 就这么来的 - 解决方法一：把 HTML 放到项目根目录（如
index.html），再右键启动 - 解决方法二：在
.vscode/settings.json中设"liveServer.settings.root": "./src"，强制服务从src/开始提供文件 - 避免用
<base href="/">，它会强行覆盖所有相对路径解析逻辑，调试时先删掉 - 别用
file://协议双击打开 —— 浏览器禁止加载本地 CSS/JS，而 Live Server 是http://，本质不同
该用 Live Server 还是直接上 Vite
别纠结“哪个更高级”，看代码里有没有这些关键词：
- 写了
import或export？→ 必须 Vite（Live Server 不解析 ES 模块） - 用了
.jsx、.tsx、.scss、.less？→ Live Server 加载不了，Vite 自带转译 - 需要
public/目录下放favicon.ico并通过/favicon.ico访问？→ Vite 支持，Live Server 要手动挪路径 - 只是写静态页、原型、教学 demo？→ Live Server 足够，零配置，开箱即用
真正容易被忽略的是协议差异：file:// 下一切看似正常，但一旦涉及 fetch、localStorage 权限或模块加载，就会静默失败；而 Live Server 强制走 http://，提前暴露问题。这点比“自动刷新”重要得多。
