Live Server插件需正确配置才能实现自动刷新：一、安装插件；二、右键已保存的.html文件启动；三、用Ctrl+Shift+P执行Live Server: Start；四、在.vscode/settings.json中设端口与root路径；五、开发者工具Network页勾选Disable cache。
Live Server 插件能解决前端开发中最烦人的“改完代码 → 切浏览器 → 按 F5 → 等加载”循环，但它的行为不是无脑自动的，很多实时更新失效、端口冲突、跨域报错，其实都源于配置没对或启动方式选错了。
Live Server 启动后浏览器不自动打开或刷新失败
这不是插件坏了，而是它默认只监听 html、css、js、svg 文件变更，且只在当前文件被“作为入口”打开时才激活监听。比如你编辑的是 main.js，但用右键打开的是 index.html，那改 main.js 就会触发刷新；但如果直接右键点开 main.js，Live Server 根本不会启动服务。
- 确保始终从一个
html文件出发启动：右键点击项目根目录下的index.html，选“Open with Live Server” - 检查状态栏是否出现蓝色
Go Live按钮并已点亮——没点亮说明服务根本没跑起来 - 如果浏览器开了但内容没变，按
F12打开 DevTools，看 Network 标签页里有没有live-reload.js加载成功（404 就是路径问题）
修改 CSS/JS 后页面没刷新，但控制台报 WebSocket connection to 'ws://127.0.0.1:5500/' failed
这是 Live Server 的 WebSocket 通信断了，常见于端口被占用、多项目同时运行、或浏览器缓存了旧的注入脚本。Live Server 默认用 5500 端口，一旦被其他程序（比如另一个 VSCode 窗口、Python 的 SimpleHTTPServer、甚至某个后台进程）占了，就会 fallback 到随机端口，但旧页面里的 live-reload.js 还在往 5500 发请求，自然连不上。
- 关掉所有已打开的 Live Server 实例（点状态栏
Go Live按钮两次，确认它变灰） - 在
.vscode/settings.json里固定端口，避免冲突："liveServer.settings.port": 8080 - 强制刷新页面时加
Ctrl+F5（跳过缓存），或者在 DevTools 的 Network 面板勾选 “Disable cache” - 如果用的是 HTTPS 页面或 iframe 嵌套场景，Live Server 默认不支持，得手动配
liveServer.settings.https
想代理 API 请求却遇到跨域，liveServer.settings.proxy 怎么写才生效
Live Server 的 proxy 功能只在服务启动时读取一次配置，改了配置必须重启服务（关掉再点 Go Live），而且它只代理发向 /api/xxx 这类路径的请求，不会重写响应头或处理凭据。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 代理配置必须写成对象数组格式，不是单个对象：
"liveServer.settings.proxy": [{ "route": "/api", "target": "http://localhost:3000" }] -
route是匹配前缀，不是正则；target必须带协议（http://或https://） - 前端 fetch 要用相对路径，比如
fetch('/api/users')，不能写fetch('http://localhost:3000/api/users') - 如果后端需要 cookies 或认证头，得额外加
"changeOrigin": true和"secure": false（仅开发环境）
多个子项目共存时，怎么让 Live Server 只 serve 当前模块
默认它把整个工作区当根目录，容易误读其他目录下的 index.html，导致打开错页面或监听无关文件。关键是用 liveServer.settings.root 锁定作用域。
- 在子项目文件夹下新建
.vscode/settings.json（注意不是工作区根目录），写入："liveServer.settings.root": "./src" - 路径是相对于当前 workspace folder 的，不是绝对路径；
"./"表示当前文件夹，"../public"也合法 - 配合
liveServer.settings.CustomBrowser可指定打开 Chrome 的隐身窗口，避免缓存干扰："chrome:PrivateMode" - 如果项目用构建工具（如 Vite、Webpack），别用 Live Server——它不处理打包逻辑，该用对应 dev server
Live Server 不是万能的本地服务器，它不执行 Node.js 代码、不解析 import 语法、也不处理路由重写。真要模拟后端接口或 SPA 路由，得切到对应的框架 dev server；而 Live Server 的价值，恰恰在于“足够轻、足够快、足够傻瓜”——只要你的需求止步于静态文件预览，它就稳得很。
