VSCode如何使用Live Server预览网页_VSCode前端动态刷新开发【效率】-VSCode-PHP中文网

live server“点不动”或“改了不刷新”的根本原因是其对文件状态、路径基准和监听范围有严格约定：未保存的临时文件、单文件模式、端口被占、根目录不明确、非默认后缀文件（如.scss/.ts）未编译、浏览器缓存或扩展干扰等任一条件不满足，均会导致服务未启动或刷新失效。

vscode如何使用live server预览网页_vscode前端动态刷新开发【效率】

Live Server 能用，但经常“点不动”或“改了不刷新”，根本原因不是插件坏了，而是它对文件状态、路径基准和监听范围有明确且严格的约定——不满足任一条件，服务就起不来，或者起了也白起。

这代表 Live Server 根本没启动成功，不是慢，是压根没跑起来。常见卡点：

当前打开的是未保存的临时标签页（比如新建文件还没 Ctrl+S），Live Server 只认已保存的 .html 文件
你右键的是资源管理器里一个没在编辑器中打开的 index.html，路径解析失败，插件直接跳过
VSCode 当前是“单文件模式”（只拖了一个 index.html 进来），不是通过 File → Open Folder 打开的整个项目文件夹 —— 它需要一个明确的根目录来提供服务
端口被占（比如另一个终端正跑着 python -m http.server 5500），Live Server 会自动换到 5501，但浏览器可能还停在旧地址，务必看右下角状态栏实际提示的 URL

双击走 file:// 协议，Live Server 走 http://127.0.0.1:5500/，两者路径解析基准完全不同。Live Server 默认以**当前 HTML 文件所在目录为服务器根路径**，不是整个工作区根目录。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

你在 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:// 的路径逻辑是两套系统

Live Server 默认只监听 .html、.htm、.xhtml、.css、.js 文件保存事件并触发刷新，但它**不会监听 .scss、.ts、.jsx 等源码文件**——这些得先编译成浏览器可执行的格式。

修改 style.scss 没反应？先确保你开了 sass --watch 把它编译成 style.css，Live Server 才能感知变化
想让 .ts 修改后也刷新，得在设置里加监听后缀："liveServer.settings.fileExtensions": ["html", "css", "js", "ts"]
浏览器缓存常是“假死”元凶：DevTools → Network → 勾选 Disable cache，再试一次保存

多数是安全限制或协议误用导致的底层 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 不够好，是它的设计边界就在这里。