VSCode使用LiveServer插件_网页开发实时刷新预览效果全教程

Live Server 这个插件，很多前端新手都用过，但十有八九会遇到一个让人抓狂的问题：改了 CSS 文件，页面纹丝不动，死活不刷新。你以为插件坏了，其实它压根就没打算监听 CSS——默认只对 .html、.htm 这类模板文件生效。这不是 bug，是设计上的取舍。

说人话就是：Live Server 只监听 HTML 类型文件的保存事件，CSS 和 JS 改了它不管。想改个样式就让页面自动刷新？要么手动配置插件，要么换个工具，比如 Vite 这种自带热模块替换（HMR）的选手。

为什么改了 style.css 保存后页面没反应

核心原因已经说了：默认只监听 .html、.htm、.xhtml、.php 这类模板文件。CSS 和 JS 修改后不会触发刷新，这是设计如此，不是插件有故障。

• 浏览器控制台看不到任何报错，页面就是不更新——先确认你改的是不是 .html 文件。
• liveServer.settings.refreshOnEdit 这个设置只影响 HTML 类型，对 .css 或 .js 完全无效。
• 最稳妥的 workaround：装一个轻量插件比如 “Refresh Page on Sa ve”，它不依赖 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/ 开始提供文件。
• 避免用 ，它会强行覆盖所有相对路径解析逻辑，调试时先删掉。
• 别用 file:// 协议双击打开——浏览器禁止加载本地 CSS/JS，而 Live Server 是 http://，本质完全不同。

该用 Live Server 还是直接上 Vite

别纠结“哪个更高级”，看代码里有没有这些关键词：

• 写了 import 或 export？→ 必须上 Vite（Live Server 不解析 ES 模块）。
• 用了 .jsx、.tsx、.scss、.less？→ Live Server 加载不了，Vite 自带转译。
• 需要 public/ 目录下放 fa vicon.ico 并通过 /fa vicon.ico 访问？→ Vite 支持，Live Server 要手动挪路径。
• 只是写静态页、原型、教学 demo？→ Live Server 足够，零配置，开箱即用。

真正容易被忽略的是协议差异：file:// 下一切看似正常，但一旦涉及 fetch、localStorage 权限或模块加载，就会静默失败；而 Live Server 强制走 http://，提前暴露问题。这一点比“自动刷新”重要得多。