双击HTML文件通过file://协议直接打开，而Live Server需HTTP服务器环境且依赖项目根目录配置；若无index.html或根路径错误则报Cannot GET /。
为什么双击 HTML 文件在浏览器里打开，但 VS Code 里右键“Open with Live Server”却报错 Cannot GET /
因为默认的右键“Open with Live Server”会启动一个本地 HTTP 服务器（比如 http://127.0.0.1:5500/），它不支持直接访问文件系统路径（如 file:///xxx/index.html）。如果项目根目录下没有 index.html，或者你当前打开的是子目录里的 HTML，Live Server 就找不到入口，返回 Cannot GET /。
实操建议：
- 确保你要打开的 HTML 文件所在文件夹是项目根目录（即 VS Code 左侧资源管理器显示的顶层文件夹）
- 如果只是单个 HTML 文件想快速预览，别用 Live Server，改用更轻量的方式
- 检查当前工作区是否被识别为多根工作区（含多个文件夹），Live Server 可能选错了根目录
不用插件，VS Code 内置方式直接在浏览器打开 HTML 文件
VS Code 自带的 Open in Default Browser 命令走的是 file:// 协议，不依赖服务器，适合静态页面快速验证。
操作步骤：
立即学习“前端免费学习笔记（深入）”；
- 用 VS Code 打开你的
index.html（或任意 HTML 文件） - 按
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS）打开命令面板 - 输入并选择
Open in Default Browser（注意不是 “Live Server”） - 浏览器会以
file:///路径打开，无跨域、无服务依赖
⚠️ 注意：这种方式下，fetch('./data.json') 或 import 模块会因浏览器同源策略失败——这是正常现象，不是配置错误。
Live Server 插件怎么配才不踩坑
Live Server 是好工具，但默认行为容易让人误以为“点一下就该跑起来”，实际它对项目结构有隐含要求。
关键配置项（在 VS Code 设置里搜 liveServer.settings）：
-
liveServer.settings.root：手动指定服务器根路径，比如设为"./src"，这样它就会把src/当作/ -
liveServer.settings.CustomBrowser：填"chrome"或"edge"，避免弹出旧版 IE -
liveServer.settings.AdvanceCustomBrowserCmdLine：调试时加--auto-open-devtools-for-tabs自动唤起 DevTools
常见错误现象：ERR_CONNECTION_REFUSED —— 多半是端口被占，可在设置里改 liveServer.settings.port 为 3000 或 8080。
HTML 里用了相对路径，浏览器打开后资源 404 怎么办
根本原因：用 file:// 打开时，浏览器把当前 HTML 文件所在目录当作根；而 Live Server 把你设的 root 当作根。两者对 ./css/style.css 或 ../images/logo.png 的解析起点不同。
解决方向分两种：
- 开发阶段优先用 Live Server，并统一用“从项目根开始”的路径，比如
/css/style.css（开头带/） - 如果必须用
file://预览，所有路径写成相对于 HTML 文件的，且避免跨级引用（../容易出错） - 图片、字体等二进制资源尽量放同一级或子目录，减少路径深度
路径问题不会报语法错误，但控制台一刷一堆 404，是新手最常卡住的地方。
