XAMPP环境PHP项目静态资源与页面链接路径错误如何解决？

解决方案 #

分两种可落地的方案，你可以根据自己的需求选择： #

方案1：通过.htaccess配置将项目作为根路径访问 #

这是你提到的预期实现方式，配置完成后可以直接用/css/main.css、/html/another.html这类绝对路径访问资源：

1. 将.htaccess文件放在XAMPP的站点根目录（默认是htdocs文件夹，不是/App子目录内），写入以下规则：

RewriteEngine On
# 排除已存在的文件/目录，避免影响其他站点项目
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# 所有未匹配的请求转发到/App目录下
RewriteRule ^(.*)$ /App/$1 [L]
# 可选：直接访问站点根路径时自动跳转到App项目首页
RewriteRule ^$ /App/ [L]

2. 开启XAMPP的Apache重写模块（默认已经开启，如果没生效可以到httpd.conf里取消LoadModule rewrite_module modules/mod_rewrite.so前面的注释）
3. 所有页面的资源、链接都统一写绝对路径即可：

<link rel="stylesheet" href="/css/main.css">
<a href="/html/another.html">link</a>

方案2：无需修改服务器配置，用<base>标签统一路径基准 #

如果不想改动全局的.htaccess影响其他项目，这个方案更简单：
在所有HTML页面（包括other.html、another.html、404.html）的<head>标签最开头加入一行base声明，指定当前项目的基准路径：

<head>
  <base href="/App/">
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <a href="html/another.html">link</a>
</body>

加完之后，页面内所有相对路径都会自动以/App/作为根目录拼接，不管页面本身在哪个子目录下，路径都能正常解析。 #

问题原因说明 #

你之前的路径报错本质是不同页面的URL基准路径不一致：

• 首页访问路径是http://localhost/App/，基准路径是/App/，写../css/main.css就会向上跳到站点根，请求http://localhost/css/main.css
• 404页访问路径是http://localhost/App/html/404.html，基准路径是/App/html/，写css/main.css就会请求http://localhost/App/html/css/main.css
  两种方案都是通过统一路径基准解决这个问题。

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