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="/>%EF%BC%8C%E5%AE%83%E4%BC%9A%E5%BC%BA%E8%A1%8C%E8%A6%86%E7%9B%96%E6%89%80%E6%9C%89%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84%E9%80%BB%E8%BE%91%EF%BC%8C%E8%B0%83%E8%AF%95%E6%97%B6%E5%85%88%E5%88%A0%E6%8E%89 %0A
%E6%94%B9%E4%BA%86%20CSS/JS%20%E4%B8%8D%E5%88%B7%E6%96%B0%EF%BC%9F%E8%BF%99%E4%B8%8D%E6%98%AF%20bug%EF%BC%8C%E6%98%AF%E8%AE%BE%E8%AE%A1%E5%A6%82%E6%AD%A4
%0ALive%20Server%20%E9%BB%98%E8%AE%A4%E5%8F%AA%E7%9B%91%E5%90%AC%20.html%E3%80%81.htm%E3%80%81.php%20%E7%AD%89%E6%A8%A1%E6%9D%BF%E7%B1%BB%E6%96%87%E4%BB%B6%E5%8F%98%E6%9B%B4%E5%B9%B6%E8%A7%A6%E5%8F%91%E6%95%B4%E9%A1%B5%E5%88%B7%E6%96%B0%EF%BC%9B.css%20%E5%92%8C%20.js%20%E4%BF%AE%E6%94%B9%E5%90%8E%E9%BB%98%E8%AE%A4%E4%B8%8D%E5%88%B7%E6%96%B0%E9%A1%B5%E9%9D%A2%EF%BC%8C%E5%8F%AA%E5%B0%9D%E8%AF%95%E7%83%AD%E9%87%8D%E8%BD%BD%EF%BC%88%E4%B8%94%E4%B8%8D%E7%A8%B3%E5%AE%9A%EF%BC%89%E3%80%82
- %0A
- %E7%A1%AE%E8%AE%A4%E4%BD%A0%E6%94%B9%E7%9A%84%E6%98%AF%E5%BD%93%E5%89%8D%E9%A1%B5%E9%9D%A2%E5%BC%95%E7%94%A8%E7%9A%84%E8%B5%84%E6%BA%90%EF%BC%8C%E6%AF%94%E5%A6%82%20
index.html%20%E9%87%8C%E5%86%99%E4%BA%86%20<link%20rel=" stylesheet>，就得改同级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 没有，决定了该用哪个——而不是哪个“更高级”。
