配置.htaccess后CSS与jQuery加载异常求助（XAMPP本地环境）

问题根源 #

URL重写后，浏览器会以新的URL路径（比如/createbook/xxx）作为当前页面的基准路径，导致原本用相对路径引用的CSS、JS文件，被浏览器错误地请求到/createbook/css/...这类不存在的路径下，所以加载失败。

具体解决方案 #

1. 改用绝对路径引用静态资源 #

把页面里CSS、JS的引用改成绝对路径，比如：

<link rel="stylesheet" href="/raman/css/style.css">
<script src="/raman/js/jquery.min.js"></script>

这样不管URL怎么重写，浏览器都会直接从正确的根目录下请求资源。

2. 给页面加base基准标签 #

在HTML的<head>标签里添加一行<base>代码，统一指定页面的基准URL：

<base href="/raman/">

之后所有用相对路径写的资源引用，都会自动基于这个基准路径请求，不用逐个修改引用地址。

3. 在.htaccess里排除静态资源 #

在现有重写规则前面，加上排除静态资源的规则，让CSS、JS等文件不被重写规则影响：

RewriteBase /raman/
RewriteEngine On

# 跳过静态资源请求（可根据实际文件后缀补充）
RewriteCond %{REQUEST_URI} \.(css|js|png|jpg|jpeg|gif|ico)$ [NC]
RewriteRule ^ - [L]

RewriteCond %{REQUEST_URI} ^/system.*
RewriteRule ^(.*) index.php?$1 [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^newdashboard$ dashboard.php
RewriteRule ^createbook/(.*)$ create_book.php?creatbookfailed=$1

这条规则会让匹配到指定后缀的静态资源直接返回，不执行后续的重写逻辑。

额外检查项 #

• 确认静态资源的实际存储路径和引用路径一致，比如/raman/css/文件夹下确实有你引用的CSS文件
• 打开浏览器控制台的“网络”面板，查看具体是哪些资源返回404错误，对应调整路径即可

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