live server仅支持全页重载,非热更新(hmr);改css/js不刷新需确认:地址为http://非file://、修改文件被html正确引用、已强制清缓存。

Live Server 插件能实现纯静态 HTML/CSS/JS 文件的自动刷新,但不是“热更新”——它每次都是全页重载,不保留 JS 状态、不跳转路由、不注入新样式;真热更新(HMR)得靠 Vite/Webpack,Live Server 做不到。
Live Server 启动后浏览器还是不刷新?先确认这三件事
常见现象是点了 Go Live,地址栏变成 http://127.0.0.1:5500/,但改完 style.css 或 script.js 保存后页面没反应。
- 检查浏览器地址是否以
file:///开头——那是双击打开的本地文件,Live Server 完全不工作;必须是http://开头才有效 - 确认你修改的文件被当前 HTML 正确引用:比如
index.html里写了<script src="js/main.js"></script>,那就要改js/main.js,而不是src/main.js - 强制清缓存:Windows/Linux 按
Ctrl+Shift+R,macOS 按Cmd+Shift+R;或者在 DevTools 的 Network 标签页勾选Disable cache
Live Server 不监听 .scss/.ts/.jsx 文件?这是设计使然
Live Server 只响应最终被 HTML <link> 或 <script></script> 引入的已编译产物(如 style.css、bundle.js),它不处理源码编译过程。
- 改了
main.scss没反应?你需要搭配Live Sass Compiler插件,让它监听并输出main.css,Live Server 才会触发刷新 - 用了
type="module"加载app.mjs?确保 VS Code 已保存该文件,且 Live Server 版本 ≥ 5.7.9(旧版可能返回错误 MIME 类型) - 项目用了 Vite 或 Create React App?直接关掉 Live Server——它的端口和刷新逻辑会跟
vite dev或npm start冲突
为什么改了代码,浏览器 URL 却跳到 localhost:5500/other.html?
Live Server 默认以你右键点击或命令面板选定的 HTML 文件为入口,但它不会“记住”你上次在编辑哪个文件。下次保存时,只要该文件被 HTML 引用,就会触发刷新;但如果你在编辑 about.html,而启动服务时点的是 index.html,那改 about.html 是不会刷新的。
- 避免跨文件误操作:始终用右键菜单启动,目标明确指向正在编辑的 HTML
- 想固定根路径?在项目根目录建
.vscode/settings.json,加这一行:"liveServer.settings.root": "./src"(假设你的 HTML 都在src/下) - 端口被占?改配置:
"liveServer.settings.port": 3000,别硬撞 5500
真正容易被忽略的是:Live Server 的“实时”只依赖文件保存事件,不依赖编辑器焦点或光标位置;如果你关了自动保存(files.autoSave 关闭),又忘了手动按 Ctrl+S,它就什么都不会做。











