VSCode不运行代码也不控制刷新,自动刷新依赖外部工具;Live Server仅整页刷新且不支持ES模块,Vite才原生支持HMR与模块热更新。

VSCode 本身不运行代码,也不控制页面刷新——所谓“自动刷新”完全依赖外部工具。你配错一层,整个链路就断掉,而错误现象(比如改了 CSS 没反应)看起来像 VSCode 的问题,其实跟它无关。
Live Server 只刷整页,不是 HMR
Live Server 插件启动的是一个简易 HTTP 服务器,它的“热更新”本质就是监听文件变化后执行 location.reload()。它不解析模块、不保留状态、不支持 import 或 JSX,只适合纯 HTML/CSS/JS 小项目。
- 常见错误现象:
Uncaught SyntaxError: Cannot use import statement outside a module——说明你双击打开了file://协议的 HTML,没走 Live Server 的http://服务 - HTML 不在项目根目录(比如在
src/index.html),右键用 Live Server 打开时,服务根路径就是src/,./assets/logo.png会去src/assets/找,不是项目根 - 别在 Vite 或 Webpack 项目里同时开 Live Server——两个 HTTP 服务共存,容易右键点错文件,打开旧链接
Vite 项目必须用 npm run dev,不是 Live Server
Vite 原生支持 ES 模块、TS、JSX 和 HMR(模块级热替换),保存后只更新变更模块,页面状态不丢失。它和 Live Server 是互斥方案,不能混用。
-
npm run dev没输出Local: http://localhost:5173/?先检查package.json里是不是写了"dev": "vite",不是"vite dev"或拼错命令 - 端口 5173 被占,Vite 不会自动换端口,直接报错;临时改用
vite --port 3000,或在vite.config.ts里加server.port: 3000 - 改了代码不刷新?打开浏览器 DevTools → Network → 勾选
Disable cache;再看 Console 是否有 JS 报错——报错会阻断 HMR
后端 Node.js 热更新靠 nodemon,不是 VSCode 设置
VSCode 的终端只是个壳,真正监听文件并重启进程的是 nodemon。配错 --watch 或 --ext,它就会漏监听或频繁重启。
- 别写
nodemon server.js就完事——默认只监听.js,如果你用了.cjs或.ts,得显式加--ext js,cjs,ts -
--watch必须指定目录,比如--watch src,别依赖默认行为;否则node_modules或日志文件一变就触发重启 - Windows 下路径分隔符容易出问题,
--ignore "dist/**/*"比--ignore "dist\**\*"更稳
最常被忽略的点:浏览器缓存。Live Server 和 Vite 都只负责通知 reload,不控制 HTTP 缓存头。开发时务必打开 DevTools → Network → 勾选 Disable cache,否则你看到的永远是旧资源。


















