live server插件装上不能直接用，90%问题源于工作区未以文件夹打开、入口非index.html、路径错误或端口冲突；必须通过“文件→打开文件夹”加载项目根目录，右键已打开的index.html选“open with live server”，并确保路径全英文、资源真实存在。
Live Server 插件装上就能用？不是。90% 的“点不亮、没刷新、404”问题，都卡在工作区结构或路径基准上，跟插件本身无关。
必须以文件夹形式打开项目，单个 HTML 文件无效
VSCode 不会为孤立的 index.html 标签页激活 Live Server 功能——右键菜单里压根不会出现 Open with Live Server，状态栏也不会显示 Go Live。这不是插件没装好，是它没拿到合法上下文。
- 操作路径：点击
文件 → 打开文件夹，选一个空文件夹或已有项目根目录 - 验证成功：左侧资源管理器显示完整文件夹树，而非一堆未命名标签页
- 确保
index.html已保存，且扩展名确实是.html（不是.txt或无后缀） - 右键目标必须是编辑器中已打开的
index.html标签页，不是资源管理器里未打开的文件图标
页面空白或报 404，根源是服务器根路径 ≠ 你想象的根路径
Live Server 默认以**当前 HTML 文件所在目录**为 Web 服务根路径，不是整个工作区根目录。比如你在 src/pages/index.html 右键启动，那 ./css/style.css 就会被解析为 http://127.0.0.1:5500/css/style.css，但真实文件在 src/css/style.css —— 必然 404。
- 最简解法：把
index.html放到项目根目录下再启动 - 灵活解法：在项目根目录建
.vscode/settings.json，写入：{"liveServer.settings.root": "./src"} - 务必删掉 HTML 中的
<base href="/">，它会强行覆盖所有相对路径逻辑，调试时先注释掉 - 别用
file://协议双击打开，浏览器会拦截本地 CSS/JS 加载
改了 CSS/JS 不刷新，这不是 bug，是默认行为
Live Server 默认只监听 .html、.htm、.php 等模板类文件的保存事件；.css 和 .js 修改后**不会触发整页刷新**，也不保证热重载生效。
- 确认你改的是当前 HTML 实际引用的文件，例如
<link rel="stylesheet" href="css/style.css">，就得改同级的css/style.css -
liveServer.settings.refreshOnEdit对.css/.js无效，别在这儿浪费时间 - 真要改样式即刷新：装个轻量插件如
Refresh Page on Save，它直接监听所有后缀并强制刷新 - 长期建议：用
vite替代，npm create vite@latest+npm run dev，改 CSS 会 HMR（热模块替换），DOM 都不重刷
最易被忽略的一点：端口冲突时 Live Server 会自动换端口（如从 5500 → 5501），但浏览器地址栏可能还停在旧 URL，务必以右下角状态栏显示的实际链接为准；另外 uBlock Origin 等广告拦截插件会静默屏蔽 localhost 的 WebSocket 连接，临时禁用可快速验证是否为此原因。
