live server插件无反应的根本原因是文件未被识别为可服务入口，仅支持已保存的.html/.htm文件；端口占用、路径解析错误（应使用根相对路径）、监听范围外文件修改及js执行阻塞均会导致功能异常。
Live Server插件装了但点“Go Live”没反应
根本原因通常是当前文件没被识别为可服务的网页入口——Live Server只对 .html、.htm 文件生效，且必须保存过（未保存的临时标签页不触发）。另外，VSCode 工作区根目录下不能有同名的 index.html 被其他进程占用（比如另一个终端正用 python -m http.server 占着 5500 端口）。
实操建议：
- 确认当前打开的是已保存的
index.html或任意.html文件，不是.txt或未命名标签页 - 右键编辑器空白处 → 选
Open with Live Server，别只点右下角状态栏的 “Go Live”（有时状态栏按钮会失效） - 检查 VSCode 右下角是否显示
Live Server: http://127.0.0.1:5500；没显示就说明没启动成功 - 如果端口被占，可在设置里改：搜索
liveServer.settings.port，设成5501或其他空闲端口
HTML里引用CSS/JS路径错乱，刷新后样式丢失
Live Server 启动的是一个本地 HTTP 服务（http://127.0.0.1:5500/），所有相对路径都以项目根目录为基准解析，不是以 HTML 文件所在目录为基准。很多人习惯写 ./css/style.css，结果 HTML 在子文件夹里时路径就断了。
实操建议：
- 统一用根相对路径（即开头带
/）：<link rel="stylesheet" href="/css/style.css">，前提是css/style.css真正在项目根目录下的css/文件夹里 - 避免
../嵌套，尤其当 HTML 可能放在不同层级时，它极易失效 - 打开浏览器开发者工具 → Network 标签页，看 404 的请求路径，直接对比你写的
href或src和实际 URL，差在哪一截就改哪一截 - 图片等静态资源同样适用这套规则，别信“本地双击能打开就代表路径对”
修改代码后浏览器没自动刷新
Live Server 默认监听 .html、.css、.js 文件变化并触发刷新，但不会监听 .json、.md 或自定义构建产物（比如 dist/ 下的文件）。更常见的是用户把 HTML 放在 src/ 里，却在 dist/ 里开 Live Server —— 那改 src/ 根本没用。
实操建议：
- 确保你在编辑的文件，和 Live Server 当前服务的根目录是一致的：右下角显示的路径，就是它认为的 “网站根目录”
- 想监听其他后缀（比如
.ts），改设置liveServer.settings.fileExtensions，填["html", "css", "js", "ts"] - 禁用浏览器缓存：DevTools → Network → 勾上
Disable cache（仅开发时），否则 CSS 更新可能被缓存掩盖 - 如果用了 Webpack/Vite 等工具链，别混用 Live Server —— 它们自带热更新，Live Server 反而干扰
为什么有时候改了 JS，控制台报错但页面不刷新？
Live Server 的“自动刷新”本质是往页面注入一段 WebSocket 客户端脚本，监听服务端信号后执行 location.reload()。但如果 JS 执行出错卡死主线程、或页面里有 window.onbeforeunload 拦截、或用了 Service Worker 缓存了旧 JS，就会导致刷新逻辑无法执行。
实操建议：
- 先关掉所有 Service Worker：DevTools → Application → Service Workers → 点
Unregister - 检查控制台是否有
Failed to load resource或Uncaught SyntaxError，修复 JS 语法错误再试 - Live Server 注入的脚本默认加在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
