为什么 slim 需要完整的目录路径来加载外部资产（js/css）文件答案

【问题标题】：why slim requires full directory path for loading external assets(js/css) file为什么 slim 需要完整的目录路径来加载外部资产（js/css）文件
【发布时间】：2018-07-31 15:34:54
【问题描述】：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script  type="text/javascript" src="/slim/app/views/animations/jquery.min.js"></script>
    <script type="text/javascript" src="/slim/app/views/animations/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/slim/app/views/animations/bootstrap.min.css">


</head>
<body>
    <div class="container">
    hello
    </div>
</body>
</html>

我必须指定加载 js 和 css 文件的完整目录路径（jquery.min.js 和 bootstrp.min.js 和 bootstrap.min.css）。我有 (/slim/app/views/animations/) 作为包含所有文件。如果当前我在视图目录中，我应该使用（动画/无论文件名如何）但在这些中不起作用方法。但如果我使用完整的目录路径，一切正常。为什么这些正在发生的任何人都可以解释一下。

(slim) 是我安装 slim 的根目录

【问题讨论】：

标签： twig slim

【解决方案1】：

使用相对路径并不是您通常使用 Slim 的方式。您的资产（JavaScript/CSS/图像等）应该在您的视图中被绝对引用：

src="/assets/js/myapp.js"

路由 URL 不直接映射到基于文件系统的资源，因为不应通过 URL 公开访问模板 - 它们仅由控制器提供服务。

一个普通的苗条file structure是这样的：

app/
public/index.php
templates/
  view.html
assets/
  images/
  js/
  css/

Some 将资产子文件夹直接添加到公用文件夹中。 Others 将这些文件夹放在根级别。

但是，一般来说，公共资产（例如 CSS、JS、图像）应该位于公共文档根目录下（公众可以访问）。

如果您不喜欢这种行为，可能会有帮助的一件事是使用 Slim 的 basePath 变量。

您应该能够在 slim.before 回调中的 index.php 中将基本 URL 设置为 View 变量，以便它可用于所有路由，如下所示：

$app->hook('slim.before', function () use ($app) {
    $app->view()->appendData(array('baseUrl' => '/base/url/here'));
});

或

$app->hook('slim.before', function () use ($app) {
    $posIndex = strpos( $_SERVER['PHP_SELF'], '/index.php');
    $baseUrl = substr( $_SERVER['PHP_SELF'], 0, $posIndex);
    $app->view()->appendData(array('baseUrl' => $baseUrl ));
});

然后将它应用到基础模板文件的 HTML 标记中的引用，就是这样。

<link rel="stylesheet" type="text/css" href="{{ base_url() }}/css/style.css" />

或使用Uri::getBaseUrl()，例如

$basePath = $request->getUri()->getBasePath();

【讨论】：

为什么 slim 不使用相对路径