Arkusze stylów Laravel i javascript nie ładują się dla tras innych niż podstawowe

Okej - wiem, że to naprawdę elementarna sprawa, ale nie mogę tego rozgryźć. To jest pytanie dotyczące Laravel.

Zasadniczo mam swoje arkusze stylów osadzone w moim domyślnym widoku układu. Obecnie używam zwykłego css, aby je połączyć, na przykład:

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

Działa świetnie, gdy jestem na trasie jednopoziomowej, takiej jak / about , ale przestaje działać, gdy idę głębiej, na przykład / about / me .

Jeśli spojrzę na konsolę programisty Chrome, widzę niektóre z następujących błędów (tylko dla głębszych tras):

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

Tak więc najwyraźniej szuka teraz css w folderze „about” - który oczywiście wcale nie jest folderem.

Chcę tylko, żeby szukał zasobów w tym samym miejscu, niezależnie od trasy.

Dla Laravel 4 i 5:

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

URL::assetpołączy się z twoim project/public/folderem, więc wrzuć tam swoje skrypty.

Laravel 4

Lepszy i poprawny sposób na zrobienie tego

Dodawanie CSS

HTML :: style będzie prowadzić do twojego projektu / publicznego / folderu

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

Dodanie JS

HTML :: script połączy się z twoim projektem / publicznym / folderem

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

Używasz ścieżek względnych dla swoich zasobów, zmień na ścieżkę bezwzględną i wszystko będzie działać (dodaj ukośnik przed „css”.

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

w laravel 5 ,
istnieją 2 sposoby, aby załadować plik JS w widoku
pierwszy wykorzystaniem HTML pomocnika, drugi jest przy użyciu pomocników aktywów.
aby użyć pomocnika html, musisz najpierw zainstalować ten pakiet za pomocą wiersza poleceń:

composer require illuminate/html

następnie musisz go ponownie uruchomić, przejdź do config / app.php i dodaj tę linię do tablicy dostawców

'Illuminate\Html\HtmlServiceProvider'

następnie musisz zdefiniować aliasy dla swojego pakietu html, więc przejdź do tablicy aliasów w config / app.php i dodaj to

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

teraz twój pomocnik html jest zainstalowany, więc w plikach widoku blade możesz napisać to:

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

to będzie szukać twojego pliku test.js w katalogu katalog_główny_projektu / public / js / test.js.
////////////////////////////////////////////////// ////////////
aby użyć pomocników zasobów zamiast pomocnika HTML, musisz napisać coś takiego w swoich plikach widoku:

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

spowoduje to wyszukanie pliku test.js w katalogu katalog_główny_projektu / zasoby / zasoby / test.js

Jeśli używasz Laravel 3 i plików CSS / JS w folderze publicznym w ten sposób

public/css
public/js

wtedy możesz do nich zadzwonić, używając w takich szablonach Blade'a

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

Sugeruję, abyś wcześniej włączył filtr tras do {projekt} /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');

});

i używając silnika szablonów ostrzy

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

lub więcej w dokumentacji laravel management asset docs

w laravel 4wystarczy wkleić w {{ URL::asset('/') }}ten sposób:

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

To samo dotyczy:

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

Laravel 5.4 z pomocnikiem mieszania:

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

W Laravel 5.7 umieść plik CSS lub JS w katalogu publicznym.

W przypadku CSS:

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

Dla JS:

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

Moim zdaniem najlepszy sposób na dodanie tagu BASE do HTML

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

Nie jest więc konieczne używanie takich rzeczy jak

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

po prostu wpisz

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

Twoim zdaniem i będzie działać.

Ta metoda zajmie się adresami URL RESTful i zasobami statycznymi, takimi jak obrazy, css, skrypty.

Vinsa prawie miała rację, powinieneś dodać

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

a skrypty powinny iść swoją zwykłą ścieżką

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

powodem tego jest to, że obrazy i inne rzeczy ze ścieżką względną, takie jak źródło obrazu lub żądania AJAX, nie będą działać poprawnie bez dołączonej ścieżki podstawowej.

Jeśli robisz to na stałe, prawdopodobnie powinieneś użyć pełnej ścieżki ( href="http://example.com/public/css/app.css"). Oznacza to jednak, że będziesz musiał ręcznie dostosować adresy URL na potrzeby programowania i produkcji.

Alternatywą dla powyższych rozwiązań byłoby użycie <link rel="stylesheet" href="URL::to_asset('css/app.css')" />w Laravel 3 lub <link rel="stylesheet" href="URL::asset('css/app.css')" />Laravel 4. To pozwoli ci napisać HTML tak, jak chcesz, ale także pozwoli Laravelowi wygenerować odpowiednią ścieżkę dla ciebie w dowolnym środowisku.

Lepszy sposób na użycie takich jak,

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

Załóżmy, że nie zmieniłeś nazwy swojego folderu publicznego. Twoje pliki css i js znajdują się w podfolderach css i js w folderze publicznym. Teraz twój nagłówek będzie wyglądał następująco:

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

Po prostu dodaj kolejny problem:

Jeśli chcesz usunąć /publicz projektu za pomocą .htaccess,

możesz tego użyć, [Dodaj publicprzed /csswnętrzem asset()]

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

[Czasami jest to przydatne.]

Laravel 4: {!! dla podwójnego nawiasu klamrowego {{
i dla wersji Laravel 5 i nowszych: możesz zamienić {!! autorstwa {{i !!} by}} w wyższej wersji

Jeśli umieściłeś JavaScript w niestandardowym katalogu.
Na przykład, jeśli twój jQuery-2.2.0.min.jsjest umieszczony w katalogu, resources/views/admin/plugins/js/to z poziomu *.blade.phpbędziesz mógł dodać na końcu sekcji jako

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

Ponieważ wersja Higher-End obsługuje również wersję Lower-End, ale nie odwrotnie

Lepszy i poprawny sposób na zrobienie tego:

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

W Laravel 5.8

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

właśnie zrobił dla mnie sztuczkę.

umieść plik skryptu w katalogu publicznym, a następnie użyj (na przykład dla userFunctions.js)

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