Live Server“点不动”或“改了不刷新”的根本原因是其对文件状态、路径基准和监听范围有严格约定：未保存的临时文件、单文件模式、端口被占、根目录不明确、非默认后缀文件（如.scss/.ts）未编译、浏览器缓存或扩展干扰等任一条件不满足，均会导致服务未启动或刷新失效。
Live Server 能用，但经常“点不动”或“改了不刷新”，根本原因不是插件坏了，而是它对文件状态、路径基准和监听范围有明确且严格的约定——不满足任一条件，服务就起不来，或者起了也白起。
为什么点“Go Live”没反应或右下角不显示端口
这代表 Live Server 根本没启动成功，不是慢，是压根没跑起来。常见卡点：
- 当前打开的是未保存的临时标签页（比如新建文件还没
Ctrl+S），Live Server 只认已保存的.html文件 - 你右键的是资源管理器里一个没在编辑器中打开的
index.html，路径解析失败，插件直接跳过 - VSCode 当前是“单文件模式”（只拖了一个
index.html进来），不是通过File → Open Folder打开的整个项目文件夹 —— 它需要一个明确的根目录来提供服务 - 端口被占（比如另一个终端正跑着
python -m http.server 5500），Live Server 会自动换到 5501，但浏览器可能还停在旧地址，务必看右下角状态栏实际提示的 URL
HTML里CSS/JS路径404，但双击能打开
双击走 file:// 协议，Live Server 走 http://127.0.0.1:5500/，两者路径解析基准完全不同。Live Server 默认以**当前 HTML 文件所在目录为服务器根路径**，不是整个工作区根目录。
- 你在
src/pages/about.html上右键Open with Live Server，那服务根就是src/pages/，./css/style.css会被请求为http://127.0.0.1:5500/css/style.css—— 但文件其实在src/css/style.css，所以 404 - 最稳做法：把
index.html放到项目根目录，再右键启动；或者统一用根相对路径：<link rel="stylesheet" href="/css/style.css">（前提是css/style.css真正在根目录下） - 别信“本地双击能打开就代表路径对”，
file://和http://的路径逻辑是两套系统
改了 CSS 或 JS 后页面没自动刷新
Live Server 默认只监听 .html、.htm、.xhtml、.css、.js 文件保存事件并触发刷新，但它**不会监听 .scss、.ts、.jsx 等源码文件**——这些得先编译成浏览器可执行的格式。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 修改
style.scss没反应？先确保你开了sass --watch把它编译成style.css，Live Server 才能感知变化 - 想让
.ts修改后也刷新，得在设置里加监听后缀："liveServer.settings.fileExtensions": ["html", "css", "js", "ts"] - 浏览器缓存常是“假死”元凶：DevTools → Network → 勾选
Disable cache，再试一次保存
Live Server 启动后页面空白或控制台报错
多数是安全限制或协议误用导致的底层 API 失效，不是代码写错了。
- 如果地址栏是
file://开头，说明你没用 Live Server，而是双击打开的——所有fetch、import、localStorage在某些场景下都会被禁用 - 某些广告拦截插件（如 uBlock Origin）会默认拦截
localhost的 WebSocket 连接，临时禁用插件可验证是否为此原因 - 用了 Webpack/Vite 等构建工具，又同时开 Live Server，二者端口和热更机制冲突，大概率白屏或 404 —— 别混用
真正容易被忽略的点是：Live Server 不是“万能预览器”，它只管静态文件托管和基础刷新；一旦项目开始用模块导入、API 请求、构建产物分发，就得切到 Vite 或 Webpack dev server —— 不是 Live Server 不够好，是它的设计边界就在这里。
