live server 默认根目录是 vs code 中通过 file → open folder 打开的工作区根目录；所有资源路径均以此为基准，如需更改可配置 liveserver.settings.root 指定子目录。
Live Server 默认根目录在哪？
Live Server 启动时，http://localhost:5500/ 的根路径就是你用 File → Open Folder 打开的那个文件夹，不是某个 HTML 文件所在子目录。这意味着所有相对路径都必须从这个根目录算起。
常见错误现象：index.html 在根目录能正常加载 css/style.css，但当你把 index.html 移到 pages/ 下，再用 Live Server 打开它，浏览器地址变成 http://localhost:5500/pages/index.html，此时页面里写 href="css/style.css" 就会 404——因为实际请求的是 http://localhost:5500/css/style.css，而 CSS 文件其实在 http://localhost:5500/pages/css/style.css。
- 不要依赖“右键单击 HTML 文件 → Open with Live Server”来决定根路径；它只影响启动页，不改变服务根目录
- 如果项目结构天然多层（如
src/pages/about.html、src/assets/css/main.css），就老老实实统一用从根目录出发的相对路径，比如href="../assets/css/main.css" - 想让
pages/about.html正确引用assets/css/main.css，路径必须是../../assets/css/main.css（两层返回根，再进 assets）
怎么让 Live Server 把子文件夹当根？
不能直接改，但可以绕过：在项目根目录下创建 .vscode/settings.json，显式指定 liveServer.settings.root。
例如你的 HTML 全在 src/ 下，CSS/JS 在 src/assets/，你想让 http://localhost:5500/ 指向 src/ 而不是项目根，就配：
{
"liveServer.settings.root": "/src"
}
注意：/src 是相对于当前工作区根目录的路径，开头的 / 表示“从工作区根开始”，不是系统绝对路径。
- 该配置只影响 Live Server，不影响其他插件或终端命令
- 如果填错路径（比如写成
"src"缺少开头斜杠），Live Server 会静默失败，页面空白或资源 404 - 多级嵌套时，优先调整
root，比在每个 HTML 里写一长串../../../更可靠
HTML 内部跳转和资源引用，路径到底怎么写？
所有 @#@#@#@#@#@#@#@#@#@0（返回根目录找 index.html）
@#@#@#@#@#@#@#@#@#@1（同级跳转，不用加 ./）绝对路径（以 / 开头）也行，但前提是 Live Server 的 root 配置跟你预期一致。比如设了 "liveServer.settings.root": "/pages"，那 href="/about.html" 就会请求 http://localhost:5500/about.html——而这个路径并不存在，404。
为什么用相对路径而不是 base 标签？
有人试过在 里加 <base href="/pages/"> 来统一基准，但容易翻车：
-
<base>会影响页面内所有相对 URL，包括<a href></a>、<img src>、<form action></form>，稍不注意就导致跳转错乱 - Live Server 对
<base>的支持不稳定，某些版本下 CSS/JS 加载失败但控制台无报错 - 一旦你换用其他本地服务器（比如
python -m http.server或 Vite），<base>可能需要同步修改，增加维护成本
真正省事的方式，是接受 Live Server 的默认行为，把路径逻辑理清，再配合 liveServer.settings.root 做一次收敛。嵌套越深，越要克制“用 base 简化”的冲动——它解决的是表象，埋下的是隐性耦合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
