live server插件需从vs code官方扩展市场安装，作者ritwick dey，名称为“live server”（全小写带空格）；必须在文件夹工作区中使用，而非单个html文件；启用方式为右键html文件选“open with live server”或点击状态栏“go live”按钮；默认端口5500被占用会导致静默失败，需通过项目根目录的.vscode/settings.json配置port、custombrowser及fileextension等项以确保css/js修改自动刷新。
直接装 Live Server 插件就行，别选 Live Preview 或 Live Reload——后者要配构建工具，前者不自动刷新，只有 Live Server 能开箱即用、起本地 HTTP 服务、改保存就刷浏览器。
怎么装和启用 Live Server
插件必须从 VS Code 官方扩展市场安装，认准作者是 Ritwick Dey，名字是 Live Server（全小写，带空格，不是 liveserver 或 live-server）。装完不用重启，但得确保你操作的是一个**文件夹工作区**，不是单个 HTML 文件拖进编辑器——否则右键没 Open with Live Server 选项，状态栏也不会出现 Go Live 按钮。
- 正确做法：新建文件夹 → 里面放
index.html→ 把整个文件夹拖进 VS Code - 常见错误：只新建一个
.html文件，直接双击打开，这时插件功能不可用 - 启用方式有两种：右键 HTML 文件选
Open with Live Server，或点状态栏最右边的Go Live
Live Server 启动后打不开 Chrome 或报错 ERR_CONNECTION_REFUSED
默认端口 5500 被占用了，Live Server 就会静默失败，浏览器打不开或显示连接被拒。它不会弹提示，只会卡在启动状态——这是最常被忽略的点。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 先检查端口是否被占用：
netstat -ano | findstr :5500（Windows）或lsof -i :5500（macOS/Linux） - 修改端口：在项目根目录建
.vscode/settings.json，写入"liveServer.settings.port": 5501 - 如果想固定用 Chrome：加一行
"liveServer.settings.CustomBrowser": "chrome" - 注意：设置只对当前工作区生效，全局设置在 VS Code 的 Settings UI 里搜
live server port
为什么改了 CSS/JS 但页面没刷新？
不是所有文件类型默认监听。Live Server 默认只响应 .html、.htm、.php 等模板类文件的保存事件；纯 .css 或 .js 修改后，它可能不触发重载——尤其当你用的是外链引入（<link rel="stylesheet"> 或 <script src="..."></script>）时。
- 解决办法：在
.vscode/settings.json中配置"liveServer.settings.FileExtension": ["html", "htm", "css", "js", "json"] - 更稳妥的做法是把
.css和.js改成内联写法临时验证，确认逻辑没问题再切回外链 - 另外，某些构建产物（如
dist/目录下的文件）不在监听路径内，需通过"liveServer.settings.root"指定根目录
真正麻烦的不是装插件，而是它默认不报错、不提示、不弹窗——端口冲突、路径不对、文件类型没监听，都会表现为“点了 Go Live 没反应”或“改了代码不刷新”，得一个个排查配置项和运行环境。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
