PHP项目不同目录引入公共header时如何保证CSS/JS路径有效？

核心原理 #

避免使用依赖当前文件层级的相对路径（即带../的路径），统一使用基于项目根目录的绝对路径，完全消除不同目录引入公共头部带来的路径差问题。

可用方案 #

方案1：直接使用站点根路径（最简单，适合项目部署在域名根目录的场景） #

直接将资源路径改为以/开头的根相对路径，浏览器会自动从当前域名的根目录开始查找资源，和当前页面所在的目录层级无关：

<head>
  <!-- 页面标题及其他配置项 -->
  <script type="text/javascript" src="/path/to/jquery.js"></script>
  <link type="text/css" rel="stylesheet" href="/path/to/style.css" />
</head>

例如你的站点域名是https://example.com，上述路径会自动解析为https://example.com/path/to/jquery.js，不管页面是在根目录的index.php还是子目录/admin/user/list.php，路径都不会失效。

方案2：定义全局根路径常量（适合项目部署在子目录、多环境部署的场景） #

在项目的公共配置文件（例如config.php，所有页面都会优先引入的公共文件）中定义全局根路径常量，后续所有资源路径都基于该常量拼接：

1. 先在配置文件中定义常量：

// 本地开发环境
define('BASE_URL', '/my_project/');
// 线上部署环境如果放在域名根目录就改为 define('BASE_URL', '/');

2. 在公共头部header.php中使用常量拼接路径：

<head>
  <!-- 页面标题及其他配置项 -->
  <script type="text/javascript" src="<?php echo BASE_URL; ?>path/to/jquery.js"></script>
  <link type="text/css" rel="stylesheet" href="<?php echo BASE_URL; ?>path/to/style.css" />
</head>

后续如果项目部署路径变更，只需要修改BASE_URL一个地方即可，无需调整所有资源路径。

方案3：自动计算根路径（无需手动配置，适配任意部署路径） #

如果不想手动修改配置适配不同环境，可以用PHP代码自动计算项目的根路径，直接在公共配置中添加以下代码：

// 自动识别HTTP/HTTPS协议
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
// 拼接得到项目完整根URL
$baseUrl = $protocol . $_SERVER['HTTP_HOST'] . rtrim(dirname($_SERVER['SCRIPT_NAME']), '/') . '/';
define('BASE_URL', $baseUrl);

后续使用方式和方案2完全一致，不管项目部署在域名根目录还是任意层级的子目录，都可以自动适配。

方案4：使用base标签简化路径书写 #

如果不想每个资源路径都拼接BASE_URL，可以在head标签最开头添加<base>标签，指定当前页面所有相对路径的基准地址：

<head>
  <base href="<?php echo BASE_URL; ?>">
  <!-- 后续所有资源都可以直接写相对根路径的地址 -->
  <script type="text/javascript" src="path/to/jquery.js"></script>
  <link type="text/css" rel="stylesheet" href="path/to/style.css" />
</head>

注意：使用base标签后，页面内的锚点链接（例如#top）也会基于base地址跳转，如有需要可以改为完整的当前页面路径+锚点的形式。

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