HTML引用CSS文件时根路径失效，需用相对路径问题求助

问题根源 #

当你直接用浏览器打开本地HTML文件（file://协议）时，以/开头的绝对路径会被浏览器解析为系统磁盘的根目录（比如C:/），而非你的项目根目录。VSCode能识别路径是因为它基于当前打开的项目目录解析，但浏览器本地打开时遵循文件系统路径规则，所以找不到对应文件。

解决方案 #

1. 使用本地服务器（推荐） #

这是最彻底的解决方式，让浏览器通过http://协议访问文件，此时/开头的路径会指向服务器的根目录（即你的项目根目录）：

• VSCode Live Server插件：安装后右键目标HTML文件，选择「Open with Live Server」，插件会启动本地服务器并打开页面，此时/assets/style/home.css会正确指向项目内的assets文件夹。
• Node.js http-server：全局安装工具：

  npm install -g http-server
  

  进入项目根目录（比如portfolio文件夹），运行：

  http-server
  

  访问控制台输出的地址（如http://localhost:8080），绝对路径即可正常生效。
• 其他服务器工具：比如XAMPP，将项目文件夹放到XAMPP的htdocs目录下，通过localhost/portfolio访问页面。

2. 添加<base>标签统一路径规则 #

在HTML的<head>标签内添加<base>标签，指定所有相对路径的基准目录：

<base href="/portfolio/">

这样所有以/开头的路径都会基于/portfolio/解析，适配本地文件访问。注意如果后续将项目部署到线上服务器，需要根据服务器的部署路径调整href的值（比如部署到域名根目录就改为<base href="/">）。

3. 批量替换为相对路径（临时方案） #

如果暂时不想使用服务器，可以用VSCode的批量替换功能，根据文件所在层级将绝对路径替换为对应相对路径：

• 比如pages目录下的HTML文件，将/assets/替换为../assets/；
• 若有更深层级的文件，调整../的数量即可。

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