Таблиці стилів Laravel та javascript не завантажуються для непростих маршрутів

Гаразд - я знаю, що це справді елементарна проблема, але я не можу це зрозуміти. Це питання стосовно Laravel.

В основному, у мене є таблиці стилів, вбудовані в моє подання за замовчуванням. В даний час я просто використовую звичайний css для їх зв’язку, наприклад:

<link rel="stylesheet" href="css/app.css" />

Це чудово працює, коли я перебуваю на однорівневому маршруті, наприклад / about , але перестає працювати, коли заходжу глибше, наприклад / about / me .

Якщо я загляну в консоль розробника Chrome, то побачу деякі з таких помилок (лише для більш глибоких маршрутів):

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://example.dev/about/css/app.css".

Тож явно зараз він шукає css всередині папки "about" - що, звичайно, зовсім не є папкою.

Я просто хочу, щоб він шукав активи там же, незалежно від маршруту.

Для Laravel 4 і 5:

<link rel="stylesheet" href="{{ URL::asset('assets/css/bootstrap.min.css') }}">

URL::assetбуде посилатися на вашу project/public/папку, тому додайте туди свої скрипти.

Laravel 4

Кращий і правильний спосіб зробити це

Додавання CSS

HTML :: style буде посилатися на ваш проект / загальнодоступну / папку

{{ HTML::style('css/bootstrap.css') }}

Додавання JS

HTML :: script буде посилатися на ваш проект / загальнодоступну / папку

{{ HTML::script('js/script.js') }}

Ви використовуєте відносні шляхи для своїх активів, змініть на абсолютний шлях, і все буде працювати (додайте скісну риску перед "css".

<link rel="stylesheet" href="/css/app.css" />

в Laravel 5 ,
є 2 способи завантаження файлів JS на ваш погляд ,
перший у використанні HTML - хелпери, другий використовує хелпери активів.
для використання html-помічника потрібно спочатку встановити цей пакет через командний рядок:

composer require illuminate/html

тоді вам потрібно його повторно зареєструвати, тому перейдіть до config / app.php і додайте цей рядок до масиву провайдерів

'Illuminate\Html\HtmlServiceProvider'

тоді вам потрібно визначити псевдоніми для вашого HTML-пакету, тому перейдіть до масиву псевдонімів у config / app.php і додайте це

'Html'     => 'Illuminate\Html\HtmlFacade'

тепер ваш HTML-помічник встановлений, тож у файлах blade view ви можете написати це:

{!! Html::script('js/test.js') !!}

це буде шукати ваш файл test.js у вашому project_root / public / js / test.js.
//////////////////////////////////////////////////// ////////////,
щоб використовувати помічники ресурсів замість помічника html, вам потрібно записати sth так у файлах перегляду:

<script src="{{ URL::asset('test.js') }}"></script>

це буде шукати файл test.js у project_root / resources / assets / test.js

Якщо ви використовуєте Laravel 3 і ваші файли CSS / JS у загальній папці, як це

public/css
public/js

тоді ви можете зателефонувати їм, використовуючи такі шаблони Blade

{{ HTML::style('css/style.css'); }}
{{ HTML::script('js/jquery-1.8.2.min.js'); }}

я пропоную вам помістити його у фільтр маршруту перед {project} /application/routes.php

Route::filter('before', function()
{
    // Do stuff before every request to your application...    
    Asset::add('jquery', 'js/jquery-2.0.0.min.js');
    Asset::add('style', 'template/style.css');
    Asset::add('style2', 'css/style.css');

});

і за допомогою механізму шаблону леза

{{ Asset::styles() }}
{{ Asset::scripts(); }}

або більше про документи щодо управління активами laravel

в laravel 4вас просто вставити {{ URL::asset('/') }}цей шлях:

  <link rel="stylesheet" href="{{ URL::asset('/') }}css/app.css" />.

Це однаково для:

  <script language="JavaScript" src="{{ URL::asset('/') }}js/jquery.js"></script>
  <img src="{{ URL::asset('/') }}img/image.gif">

Laravel 5.4 з помічником суміші:

<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
<script src="{{ mix('/js/app.js') }}"> </script>

У Laravel 5.7 помістіть ваш файл CSS або JS у загальнодоступний каталог.

Для CSS:

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

Для JS:

<script type="text/javascript" src="{{ asset('bootstrap.js') }}"></script>

На мою думку, найкращий спосіб додати тег BASE у свій HTML

<base href="/" target="_top">

Тому не потрібно використовувати такі речі, як

{{ HTML::script('js/jquery/jquery-1.11.1.min.js'); }}

просто введіть

<script src="js/jquery/jquery-1.11.1.min.js"></script>

на ваш погляд, і це буде працювати.

Цей метод буде мати справу з RESTful URL-адресами та статичними ресурсами, як зображення, CSS, сценарії.

Вінса майже мав це правильно, ви повинні додати

<base href="{{URL::asset('/')}}" target="_top">

і сценарії повинні йти своїм звичайним шляхом

<script src="js/jquery/jquery-1.11.1.min.js"></script>

Причиною цього є те, що Зображення та інші речі із відносним шляхом, як джерело зображення або запити ajax, не працюватимуть належним чином без приєднання базового шляху.

Якщо ви робите жорсткий код, вам слід скористатися повним шляхом (href="http://example.com/public/css/app.css" ). Однак це означає, що вам доведеться вручну коригувати URL-адреси для розробки та виробництва.

Альтернативою вищезазначеним рішенням може бути використання <link rel="stylesheet" href="URL::to_asset('css/app.css')" />в Laravel 3 або <link rel="stylesheet" href="URL::asset('css/app.css')" />в Laravel 4. Це дозволить вам писати свій HTML так, як ви хочете, але також дозволить Laravel створити правильний шлях для вас у будь-якому середовищі.

Кращий спосіб використовувати, як,

<link rel="stylesheet" href="{{asset('assets/libraries/css/app.css')}}">

Припустимо, ви не перейменували свою загальнодоступну папку. Ваші файли css та js знаходяться у підпапках css та js у загальній папці. Тепер ваш заголовок буде:

<link rel="stylesheet" type="text/css" href="/public/css/icon.css"/>
<script type="text/javascript" src="/public/js/jquery.easyui.min.js"></script>

Просто додайте ще один випуск:

Якщо ви хочете видалити /publicзі свого проекту за допомогою .htaccess,

тоді ви можете використовувати це, [Додати publicперед /cssвсередині asset()]

<link href="{{ asset('public/css/app.css') }}" rel="stylesheet">

[Іноді це корисно.]

Для Laravel 4: {!! для подвійної фігурної дужки {{
і для версії Laravel 5 і вище: ви можете замінити {!! від {{і !!} від}} у вищій версії

Якщо ви розмістили JavaScript у спеціально визначеному каталозі.
Наприклад, якщо ваш файл jQuery-2.2.0.min.jsрозміщено в каталозі, resources/views/admin/plugins/js/тоді з *.blade.phpкінця розділу ви зможете додати як

<script src="{!! asset('resources/views/admin/plugins/js/jQuery-2.2.0.min.js') !!}"></script>

Оскільки версія вищого класу також підтримує версію нижчого класу, але не навпаки

Кращий і правильний спосіб зробити це:

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

У Laravel 5.8

<script src="{{asset('js/customPath1/customPath2/customjavascript.js')}}"></script>

просто зробив для мене фокус.

помістіть файл сценарію у відкритий каталог, а потім використовуйте (наприклад, для userFunctions.js)

<script type="text/javascript" src="{{asset('js/userFunctions.js')}}">