live server 的根路径默认为 vs code 当前打开的文件夹（${workspacefolder}），若未通过“文件→打开文件夹”则退化为 html 文件所在目录；可通过设置 liveserver.settings.root 自定义，如 "./src"。
Live Server 的根路径怎么定？
Live Server 默认把 VS Code 当前打开的文件夹（即 ${workspaceFolder}）当作网站根目录，所有以 / 开头的路径都从这里算起。比如你项目结构是 my-project/index.html 和 my-project/css/style.css，那在 HTML 里写 <link href="/css/style.css"> 才能加载成功。
常见错误现象：GET http://127.0.0.1:5500/css/style.css net::ERR_ABORTED 404，不是文件不存在，而是你写的路径没对上这个根。
- 如果你没用
File > Open Folder，而是直接双击打开单个.html文件，Live Server 会 fallback 到该文件所在目录为根——但行为不稳定，不建议依赖 - 想改根目录？在 VS Code 设置里搜
liveServer.settings.root，填相对路径如"./src"，它就会把src/当作/ - 插件作者 Ritwick Dey 的原版 Live Server（ID
ritwickdey.LiveServer）才支持这些配置，其他同名插件可能不认
为什么双击打开和 Live Server 下路径表现不一样？
因为协议不同：双击走的是 file://，Live Server 走的是 http://，而浏览器对这两种协议的“当前目录”定义完全不同。
假设 index.html 和 data.json 在同一文件夹：
-
file://下：fetch("./data.json")可能失败（Chrome 禁用），fetch("data.json")有时能成，但不可靠 -
http://下：fetch("./data.json")和fetch("data.json")都行，前提是 URL 解析基准一致（即都相对于当前 HTML 文件位置） - 相对路径写法要跟着运行方式走：Live Server 推荐用
/xxx（根相对），双击预览或部署到子路径时必须用./xxx或../xxx（纯相对）
VS Code 编辑时按住 Alt 拖拽 CSS/JS 文件到 href 或 src 属性里，它会自动算出正确的纯相对路径——比手敲靠谱得多。
launch.json 调试 HTML 时路径错在哪？
VS Code 自带的 Chrome 调试器默认找 http://localhost:8080，但 Live Server 启的是 http://127.0.0.1:5500，两者端口、host 全不匹配，一调试就报 Unable to connect to localhost。
真正要改的只有三处：
-
url字段必须改成 Live Server 实际地址，比如"http://127.0.0.1:5500/index.html" - 如果用了自定义端口（比如设了
liveServer.settings.port为3000），这里就得同步改成http://127.0.0.1:3000/index.html - 删掉或注释掉所有含
file:或localhost:8080的旧配置，避免冲突
别抄网上过时的 launch.json 样例——2026 年主流 Live Server 已不兼容那些写死 8080 的配置。
路径问题最常被忽略的一点
文件没保存，右键菜单里就没有 Open with Live Server 选项。VS Code 只对已保存的 .html 文件才激活该命令，标题栏带 * 号就是没存。另外，文件名含中文或空格（比如 我的页面.html）在某些旧系统或插件版本下仍可能触发解析失败——哪怕 Live Server 官方说已修复，实测中仍有小概率卡住。遇到右键无反应，先 Ctrl+S，再改名成 index.html 试试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
