Ошибка загрузки CSS, JS и изображений на каждой странице, кроме корневой страницы - PullRequest
Новая
       7

Ошибка загрузки CSS, JS и изображений на каждой странице, кроме корневой страницы

0 голосов
/ 22 сентября 2019

Локальная среда разработки корректно загружает первую страницу сайта 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 и изображениями.

Я застрял на этом в течение нескольких часов и хорошо знаком с технологиями на стороне сервера.Любая помощь будет оценена.

Ответы [ 2 ]

1 голос
/ 22 сентября 2019

@ Решение 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">
1 голос
/ 22 сентября 2019

Избегайте ссылок на статические ресурсы через относительные ссылки.
Поэтому вместо 

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

Используйте помощник asset для определения полного URL-адреса 

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