修改OpenCart的.htaccess重写规则后JS、CSS及图片无法加载

问题根源 #

1. 资源路径解析偏差：当URL变为http://localhost/sample/geolocation时，页面内的相对路径资源（如catalog/view/javascript/...）会被浏览器解析为/sample/geolocation/catalog/view/...，但实际资源存储在/sample/catalog/view/...路径下，导致找不到资源。
2. .htaccess规则漏洞：原规则中第二个路由规则未设置静态资源排除条件，请求JS、CSS等静态资源时会被错误转发到index.php，无法直接返回文件内容。

解决方案 #

1. 修正.htaccess重写规则

调整规则顺序，优先放行存在的文件/目录，再处理路由逻辑：

Options +FollowSymlinks
Options -Indexes

# 禁止直接访问敏感文件
<FilesMatch "(?i)((\.tpl|\.twig|\.ini|\.log|(?<!robots)\.txt))">
 Require all denied
</FilesMatch>

RewriteEngine On

RewriteBase /sample/

# 处理站点地图和谷歌基础feed
RewriteRule ^sitemap.xml$ index.php?route=extension/feed/google_sitemap [L]
RewriteRule ^googlebase.xml$ index.php?route=extension/feed/google_base [L]

# 禁止直接访问存储目录
RewriteRule ^system/storage/(.*) index.php?route=error/not_found [L]

# 优先放行存在的文件或目录，不进行重写
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# 处理带地理位置参数的路由
RewriteRule ^([^/]+)/(.*)$ index.php?city=$1&_route_=$2 [L,QSA]

# 处理普通路由
RewriteRule ^(.*)$ index.php?_route_=$1 [L,QSA]

2. 确保资源使用绝对路径

• 用OpenCart内置方法加载资源：模板中调用$this->document->addScript()、$this->document->addStyle()等方法，这些方法会自动生成基于站点根目录的绝对路径。
• 手动编写路径时以站点根目录开头：比如将<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js"></script>改为<script src="/sample/catalog/view/javascript/jquery/jquery-2.1.1.min.js"></script>。

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