VS Code中Live Server扩展使用异常求助

排查方向1：检查资源文件的相对路径 #

这是最常见的触发原因——文件在不同文件夹中时，资源引用的相对路径规则会发生变化。

• 打开buttons.html，查看其中CSS、图片等资源的引用代码，比如原本写的./style.css，若Lesson 4的文件夹结构是Lesson4/css/style.css，则路径会直接失效；或是原本基于Lesson 1的路径写了../Lesson1/css/style.css，放到Lesson 1里能正常寻址，但在Lesson 4中路径逻辑完全错误。
• 修正路径：确保所有资源引用均为相对于当前buttons.html所在位置的正确路径，比如CSS与HTML同文件夹时用./style.css，CSS在子文件夹css中时用./css/style.css。

排查方向2：确认Live Server的根目录设置 #

Live Server默认以当前打开的工作区/文件夹作为根目录，若你仅单独打开Lesson 1文件夹作为工作区，访问Lesson 4内的文件时会出现路径解析错误。

• 调整VS Code工作区：确保打开的是包含Lesson 1和Lesson 4的上级文件夹，而非单独的Lesson 1文件夹，这样Live Server会以上级文件夹为根目录，正确解析各子文件夹的资源路径。
• 手动指定根目录：在VS Code设置中搜索Live Server: Root，将其设置为存放所有Lesson文件夹的上级目录路径，比如./（若上级文件夹为当前工作区），或是具体路径如C:/Projects/HTML-CSS-Lessons。

排查方向3：清理浏览器缓存 #

浏览器缓存的旧资源可能导致新文件夹内的文件加载异常。

• 按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新Chrome页面，跳过缓存重新加载所有资源。
• 也可在Chrome开发者工具（F12）中勾选Disable cache选项，再刷新页面测试。

排查方向4：检查文件权限与命名规则 #

• 确认Lesson 4文件夹及内部文件无权限问题：Windows下可右键文件夹查看“属性”取消只读属性；Mac/Linux下可通过终端执行chmod -R 755 Lesson4赋予正常读写权限。
• 避免文件夹或文件名包含空格、特殊字符（如中文、&、#等），这类字符可能导致Live Server路径解析失败，尽量使用小写字母、数字和连字符命名。

内容的提问来源于stack exchange，提问作者Jorys MAHAMBA