Live Server 插件开箱即用，但需满足三前提：HTTP协议访问（必须为http://localhost:5500/，禁用file:///）、HTML正确引用资源路径、保存触发刷新；常见不刷新问题多因协议或路径错误。
用 Live Server 插件就能实现，不是“可能”，而是开箱即用的默认行为——只要满足三个前提：HTTP 协议访问、文件被 HTML 正确引用、保存动作触发。
为什么改了 CSS/JS 浏览器却不刷新？
这是最常被误认为插件失效的问题，实际几乎全是路径或协议问题。
- 浏览器地址栏必须是
http://localhost:5500/开头，file:///协议下Live Server完全不工作 -
index.html里写的是<link rel="stylesheet" href="css/style.css">，你就得改磁盘上真实的./css/style.css，而不是./src/css/style.css - 旧版
Live Server（type="module" 的 JS 文件返回错误 MIME 类型，升级到最新版可解决 - VS Code 若关闭了
files.autoSave，你没手动 Ctrl+S，它就根本没“保存”，自然不会触发刷新
如何确保每次修改都真正触发刷新？
关键不在插件设置，而在启动方式和项目结构。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 永远用右键菜单操作：在资源管理器中右键目标
index.html→Open with Live Server，比点状态栏Go Live更可靠，能明确绑定入口文件 - 项目必须通过
File → Open Folder打开整个目录，单个 HTML 文件拖进 VS Code 不会识别为有效工作区 - 路径不能含中文或空格，尤其 Windows 下旧版插件对非 ASCII 路径支持不稳定，建议全英文命名
- 如果用了
SCSS或TS，Live Server不监听源文件，要配Live Sass Compiler或ESBuild等编译插件输出.css/.js产物
端口冲突或默认浏览器打不开怎么办？
本质是配置未生效或被系统拦截，不是插件缺陷。
- 默认端口
5500被占用时，必须在.vscode/settings.json中显式指定新端口："liveServer.settings.port": 3000 - 想固定服务根目录（比如所有 HTML 都在
src/下），加配置："liveServer.settings.root": "./src" - Chrome 打不开？检查
liveServer.settings.CustomBrowser是否设为"chrome"，并确认liveServer.settings.AdvanceCustomBrowserCmdLine指向本地 Chrome 可执行路径（如C:\Program Files\Google\Chrome\Application\chrome.exe） - 若仍失败，临时关掉杀毒软件或防火墙——某些国产安全软件会拦截本地 HTTP 服务的进程启动
真正容易被忽略的，是 Live Server 的刷新逻辑完全依赖文件系统“保存事件”，它不管你是写了半行代码还是删了一整个函数，只认 Ctrl+S 这一下。如果你习惯靠编辑器自动保存，却忘了开启 files.autoSave，那所谓“实时”就只是幻觉。
