网页样式表链接失败求助：目录相对路径配置问题排查

问题根源 #

你当前的路径引用逻辑错误，实际项目目录层级如下：

example/  # 项目根目录
├── index.html
├── assets/
│   └── plugins/
│       └── bootstrap/
│           └── css/
│               └── bootstrap.min.css
└── pages/
    └── features.html

features.html 存放在 example/pages/ 路径下，使用 ../../example/ 会向上跳转两层，直接跳出了example根目录，再寻址example文件夹自然找不到对应资源。

可直接使用的修复方案 #

三种路径写法任选其一即可：

• 相对路径写法（适配本地直接打开HTML文件的场景）
  把引入代码替换为：

  <link href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
  

  逻辑说明：../ 从pages目录向上回退一层到example根目录，直接拼接assets下的资源路径即可。
• 根路径写法（适配本地/服务端部署场景，项目部署在域名根目录时使用）

  <link href="/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
  

  逻辑说明：以/开头的路径会直接从项目根目录开始寻址，不用考虑当前HTML文件所在的层级。
• 相对路径适配多级子目录写法（如果后续pages下还要加子目录也不用改）
  可以在HTML的<head>标签最顶部加<base href="../">，之后所有资源引用都和根目录下的index.html写法完全一致：

  <head>
    <base href="../">
    <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  </head>
  

快速定位路径问题的通用方法 #

• 打开浏览器开发者工具（按F12），切换到「网络」面板，刷新页面，找到加载失败的CSS资源，点击查看「请求地址」，就能直接看到浏览器实际拼接的资源路径是什么，和你预期的路径对比就能快速发现层级错误。
• 如果是本地直接打开HTML文件，地址栏显示的是file://开头的路径，把加载失败的资源请求地址复制到地址栏打开，看是否能访问到文件，就能验证路径是否正确。

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