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——除非你把整个项目部署到服务器根路径。本地开发时，别加前导斜杠。