Live Server插件启动失败、页面空白或404，主因是VSCode未以文件夹形式打开项目、入口文件非index.html、资源路径错误或端口被占；需通过“文件→打开文件夹”加载根目录，右键已打开的index.html选“Open with Live Server”，并确保路径全英文、CSS/JS文件真实存在。
Live Server 插件本身不难装，但装完点不亮、预览空白、改了 CSS 不刷新——这些问题 90% 都不是插件问题，而是工作区或路径没对。
VSCode 必须以文件夹形式打开项目
单个 index.html 文件拖进 VS Code，右键根本不会出现 Open with Live Server；状态栏也不会显示 Go Live。这不是插件失效，是它压根没拿到合法上下文。
- 必须通过 文件 → 打开文件夹 加载整个项目目录（哪怕只有一份 HTML）
- 资源管理器左侧要能看到文件夹结构，而不是一堆未命名的标签页
- 确保
index.html已保存，且扩展名确实是.html（不是.txt或无后缀） - 右键操作目标必须是编辑器里已打开的
index.html标签页，不是资源管理器里未打开的文件
启动 Live Server 的三种方式，优先级不同
点击状态栏 Go Live 有时会静默失败；最稳的方式是右键编辑器标签页上的 index.html → 选 Open with Live Server。
- 命令面板（
Ctrl+Shift+P）输入Live Server: Open With Live Server也可靠 - 若右下角没显示
http://127.0.0.1:5500，说明服务根本没起来，不是“慢”，是没启动成功 - 端口被占时 Live Server 会自动换到
5501，但浏览器地址栏可能还停在旧端口，务必看状态栏实际提示的 URL
页面空白或 404，大概率是路径解析错了
Live Server 默认以 当前 HTML 文件所在目录 为服务器根路径，不是整个工作区根目录。
- 比如你在
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" - 避免用
<base href="/>，它会强行覆盖所有相对路径逻辑，调试时先删掉
改了 CSS/JS 不刷新？这不是 bug，是设计如此
Live Server 默认只监听 .html、.htm、.php 等模板类文件变更并触发整页刷新；.css 和 .js 修改后默认不刷新页面，只尝试热重载（且不稳定）。
- 确认你改的是当前页面引用的资源，比如
index.html里写了<link rel="stylesheet" href="css/style.css">，就得改同级css/style.css - 检查
liveServer.settings.ignoreFiles是否误加了"**/*.css" - Chrome DevTools → Network → 勾选
Disable cache（仅 DevTools 打开时生效） - 真要改个样式就局部更新、保留 JS 状态，得换 Vite：
npm create vite@latest→npm run dev，它才是 HMR
真正卡住的往往不是“怎么装”，而是混淆了静态服务和构建工具的边界：Live Server 解决的是 file:// 协议限制，Vite 解决的是模块化开发流程。你写了 import 没有，决定了该用哪个——而不是哪个“更高级”。
