Slim Framework下JS/CSS资源404未找到问题求助（已参考同类问题无效）

嘿，我来帮你搞定这个Slim框架下静态资源加载失败的问题！结合我碰到过的类似情况，给你梳理几个最可能的原因和解决办法：

1. 先确认静态资源的存放位置是否正确 #

Slim框架的public文件夹是你的Web服务器的根目录，所有需要直接访问的静态资源（CSS、JS、图片等）都得放在这个文件夹下面。比如：

• 创建public/css文件夹，把你的样式文件放进去（比如public/css/main.css）
• 创建public/js文件夹，存放脚本文件（比如public/js/app.js）

别把资源文件放在templates或者其他非public目录里，服务器根本访问不到这些地方的文件哦。

2. 模板里用对资源引用路径 #

绝对别用相对路径（比如../css/main.css）！因为当你的路由是多级路径（比如/article/123）时，相对路径会指向错误的位置，直接导致404。

正确的做法是使用基于网站根目录的绝对路径（以/开头），示例代码如下：

<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My WebSite</title>
  <link rel="stylesheet" href="/css/main.css">
  <script src="/js/app.js"></script>
</head>

如果你的Slim应用部署在子目录下（比如http://yourdomain.com/slim-app/），可以用Slim的urlFor辅助函数生成正确路径：

<link rel="stylesheet" href="<?= $this->urlFor('static', ['type' => 'css', 'file' => 'main.css']) ?>">

不过前提是你需要先在路由里定义对应的静态资源路由：

$app->get('/{type}/{file}', function ($request, $response, $args) {
  $path = __DIR__ . '/../public/' . $args['type'] . '/' . $args['file'];
  return $response->withFile($path);
})->setName('static');

3. 检查Web服务器的配置 #

这也是很容易踩坑的点：

• Apache用户：确保public目录下的.htaccess文件配置正确，默认的Slim规则应该是这样的：

  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^ index.php [QSA,L]
  

  这个规则的作用是：如果请求的文件/目录实际存在，就直接返回；否则才交给index.php处理，这样静态资源就能被正确访问。
• Nginx用户：在你的站点配置里加上这段规则：

  location / {
      try_files $uri $uri/ /index.php?$query_string;
  }
  

  原理和Apache的规则一样，优先返回存在的静态资源，再处理路由请求。

4. 排查路由冲突 #

偶尔会出现你定义的路由和静态资源路径重名的情况，比如你定义了$app->get('/css', ...)，这会导致访问/css/main.css时被路由拦截而找不到资源。所以要确保你的路由路径不会和静态资源的目录名重复。

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