Таблицы стилей 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 установлен, поэтому в файлах представления лезвия вы можете написать это:

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

это будет искать ваш файл test.js в вашем каталоге_проекта / public / js / test.js.
////////////////////////////////////////////////// ////////////
Чтобы использовать помощники по ресурсам вместо помощника html, вы должны написать что-то вроде этого в своих файлах представления:

<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 в каталог Public.

Для 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>

на ваш взгляд, и он будет работать.

Этот метод будет работать с URL-адресами RESTful и статическими ресурсами, такими как изображения, 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 и более поздних версий: вы можете заменить {!! by {{and !!} by}} в более дорогой версии

Если вы поместили 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>

Поскольку версия Higher-End также поддерживает версию Low-End, но не наоборот

Лучший и правильный способ сделать это:

<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')}}">