使用.htaccess配置SEO友好URL后CSS文件无法加载的技术求助

看起来你已经搞定了URL重写的核心规则，但碰到了静态资源加载失败的典型坑——这是浏览器对相对路径的解析逻辑搞的鬼！

问题根源 #

当你访问 https://sparkle.000webhostapp.com/movie/16 时，浏览器会把 /movie/ 当作当前目录。如果你的CSS引用用的是相对路径（比如 css/style.css），浏览器会傻呵呵地请求 https://sparkle.000webhostapp.com/movie/css/style.css，但你的CSS文件明明在根目录的 css/ 文件夹里，自然找不到啦。

三种可行解决方案 #

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

这是最直接省心的方式：把所有CSS、JS、图片的引用路径改成以 / 开头的绝对路径。比如：

<link rel="stylesheet" href="/css/style.css">
<script src="/js/main.js"></script>
<img src="/images/poster.jpg">

这样不管当前URL是什么路径，浏览器都会直接从网站根目录找资源，稳得一批。

2. 在HTML头部添加<base>标签

要是不想逐个改资源路径，可以在HTML的<head>里加个<base>标签，给所有相对路径指定一个基准URL：

<head>
  <base href="/">
  <!-- 其他head内容照常放 -->
</head>

这个标签会告诉浏览器：所有相对路径都基于网站根目录解析，效果和用绝对路径一样，但不用改一堆代码。

3. 修改.htaccess排除静态资源重写

如果没法改HTML代码，也可以在服务器配置上下功夫——给现有重写规则加个前置条件，让实际存在的文件/目录不被重写：

Options -MultiViews
RewriteEngine On

# redirect "/movie.php?id=xxx" to "/movie/xxx"
RewriteCond %{THE_REQUEST} \s/movie\.php\?id=([0-9]+)\s [NC]
RewriteRule ^ /movie/%1? [R=301,L]

# 只有当请求的不是真实文件/目录时，才执行内部重写
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^movie/([0-9]+)$ /movie.php?id=$1 [L]

!-f 意思是“请求的不是一个已存在的文件”，!-d 是“请求的不是一个已存在的目录”，这样静态资源会直接被服务器返回，不会被重写规则干扰。

方案推荐 #

优先选第一种或第二种方法，逻辑直观且不容易出问题；第三种适合没法碰HTML代码的场景。

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