在除根页面之外的每个页面上加载 CSS、JS 和图像时出错答案

【问题标题】：Error loading CSS, JS, and images on every page except for root page在除根页面之外的每个页面上加载 CSS、JS 和图像时出错
【发布时间】：2020-01-22 11:37:57
【问题描述】：

本地开发环境正确加载 laravel 站点的第一页，但之后的任何页面都缺少 CSS、JS 和图像。（没有加载）

我正在我的本地服务器上设置一个站点，该站点适用于实时和临时站点。他们的设置使用 Apache，而我的使用 Nginx 和 Homestead。

我可以让网站正确加载第一页。当我导航到其他页面时，会加载 html，但没有加载 CSS、JS 或图像。

我已经仔细检查了我正确提取内容的所有文件夹，并且所有内容都存在。（第一页正常加载）

当我查看控制台时，这是我收到的错误消息：

GET http://website.test/public/front/css/bootstrap.min.css net::ERR_ABORTED 500（内部服务器错误）

我看到了其中的 18 条错误消息。都与 CSS、JS 和图像相关。

我已经坚持了几个小时，并且非常了解服务器端技术。任何帮助将不胜感激。

【问题讨论】：

标签： laravel nginx nginx-config

【解决方案1】：

@Caddy DZ 的解决方案非常适合 Laravel，因为它会生成一个绝对 URL，但我认为真正理解为什么会发生这种情况对你来说很重要，这样你就不会再次陷入困境。

假设您正在从下面的 URL 查看您的网站，并且有两个链接的 CSS 资源：
https://example.com/product/101

1) <link href="front/css/bootstrap.min.css">
2) <link href="/front/css/bootstrap.min.css">

这两个链接产生不同的结果！您必须使用前导 / 来指示站点根目录，否则所有资源都将相对于当前目录路径 /product。

1) https://example.com/product/front/css/bootstrap.min.css
2) https://example.com/front/css/bootstrap.min.css

另外，Laravel 提供了 asset() 帮助器，它将生成一个绝对 URL。

<link href="{{ asset('front/css/bootstrap.min.css') }}">

// becomes an absolute URL
<link href="https://example.com/front/css/bootstrap.min.css">

【讨论】：

这个答案帮助我了解发生了什么，以及如何解决我遇到的其他问题。

【解决方案2】：

避免通过相对链接链接到静态资产。
所以不是

<img src="images/photo.png">
<link href="front/css/bootstrap.min.css">
<script src="front/js/app.js">

使用asset 帮助器找出完整的网址

<img src="{{ asset('images/photo.png') }}">
<link href="{{ asset('front/css/bootstrap.min.css') }}">
<script src="{{ asset('front/js/app.js') }}">

【讨论】：