live server右键无反应的根本原因是未保存文件、未以文件夹打开工作区或扩展未启用；css/js修改不刷新因默认仅监听html类文件，需手动配置监听后缀；端口冲突可右下角长按go live更换；路径须避免根相对路径（如/css/style.css）导致404。
Live Server 在 VSCode 里不能直接运行 HTML 文件——它只响应工作区根目录下的请求，且默认不处理 file:// 协议打开的页面。
为什么右键“Open with Live Server”没反应？
常见原因有三个：
- 当前文件未保存（.html 文件必须先
Ctrl+S保存，Live Server 才会监听） - VSCode 没有识别出当前是前端项目——确保你用
File > Open Folder...打开了包含 HTML 文件的文件夹，而不是单独打开文件 - 扩展未启用或冲突——检查是否禁用了
Live Server扩展，或同时启用了其他服务器类扩展（如Auto Run On Save），可能抢夺端口
如何让 CSS/JS 修改后自动刷新？
Live Server 默认开启热重载，但有几个关键限制：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 仅对同一工作区内的
.html、.css、.js文件生效；外部引入的 CDN 资源（如https://cdn.jsdelivr.net/npm/vue@3）修改不会触发刷新 - 如果使用了构建工具（如 Vite、Webpack），不要用 Live Server——它不解析
import、不处理.vue或.ts，会直接报 404 - 某些 CSS 预处理器（如 Sass）需编译为
.css后才能被监听；Live Server 不执行编译，只托管静态文件
端口被占用或想换端口怎么办？
Live Server 默认用 5500，但可快速调整：
- 点击右下角状态栏的
Go Live按钮，长按弹出菜单 → 选Change Port→ 输入新端口号（如3000） - 或者在
settings.json中添加配置："liveServer.settings.port": 3000
- 注意：改端口后，浏览器地址栏要手动更新，旧标签页不会自动跳转
真正容易被忽略的是路径问题：Live Server 总以打开的文件夹为根目录提供服务，所以 <link href="css/style.css"> 是对的，但 <link href="/css/style.css">（带开头斜杠）会从域名根开始找，导致 404——除非你把整个项目部署到服务器根路径。本地开发时，别加前导斜杠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
