Laravel stil sayfaları ve javascript temel olmayan rotalar için yüklenmiyor

Tamam - Bunun gerçekten basit bir mesele olduğunu biliyorum ama çözemiyorum. Bu Laravel ile ilgili bir sorudur.

Temel olarak, stil sayfalarım varsayılan düzen görünümüme gömülüdür. Şu anda bunları bağlamak için normal css kullanıyorum, örneğin:

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

/ About gibi tek seviyeli bir rotadayken harika çalışıyor, ancak / about / me gibi daha derine indiğimde çalışmayı durduruyor .

Chrome'un geliştirici konsoluna bakarsam, aşağıdaki hatalardan bazılarını görüyorum (yalnızca daha derin rotalar için):

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

Açıkça şu anda "about" klasörünün içinde css arıyor - ki bu hiç de bir klasör değil.

Sadece rotadan bağımsız olarak varlıklar için aynı yere bakmasını istiyorum.

Laravel 4 ve 5 için:

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

URL::assetproject/public/klasörünüze bağlanacaktır , bu yüzden komut dosyalarınızı oraya koyun.

Laravel 4

Bunu yapmanın daha iyi ve doğru yolu

CSS ekleme

HTML :: style, projenize / public / klasörünüze bağlanacak

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

JS ekleniyor

HTML :: script, projenize / public / klasörünüze bağlanacak

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

Varlıklarınız için göreli yollar kullanıyorsunuz, mutlak bir yola geçiş yaparsınız ve her şey çalışacaktır ("css" den önce bir eğik çizgi ekleyin.

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

Laravel 5'te ,
görünümünüzde bir js dosyasını yüklemenin 2 yolu vardır,
ilk önce html yardımcısını kullanmak, ikincisi varlık yardımcılarını kullanmaktır.
html yardımcısını kullanmak için önce bu paketi komut satırı aracılığıyla yüklemeniz gerekir:

composer require illuminate/html

sonra bunu istemeniz gerekir, bu yüzden config / app.php adresine gidin ve bu satırı sağlayıcı dizisine ekleyin

'Illuminate\Html\HtmlServiceProvider'

o zaman html paketiniz için takma adlar tanımlamanız gerekir, bu yüzden config / app.php'deki takma adlar dizisine gidin ve bunu ekleyin

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

artık html yardımcınız yüklendi, böylece blade görünüm dosyalarınızda şunu yazabilirsiniz:

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

bu, project_root / public / js / test.js dosyanızda test.js dosyanızı arayacaktır.
//////////////////////////////////////////////// ////////////
html yardımcısı yerine varlık yardımcılarını kullanmak için, görünüm dosyalarınızda şu şekilde bir sth yazmanız gerekir:

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

bu proje_kökü / kaynaklar / varlıklar / test.js içindeki test.js dosyasını arayacaktır

Laravel 3 ve CSS / JS dosyalarınızı bunun gibi ortak klasörde kullanıyorsanız

public/css
public/js

daha sonra bunları Blade şablonlarında şu şekilde kullanarak arayabilirsiniz:

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

{project} /application/routes.php adresinden önce rota filtresine koymanızı öneririm

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');

});

ve bıçak şablon motorunu kullanma

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

veya laravel varlık yönetimi belgeleri hakkında daha fazlası

içinde laravel 4size sadece yapıştırmak zorunda {{ URL::asset('/') }}bu şekilde:

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

Aşağıdakiler için de geçerlidir:

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

Karma yardımcılı Laravel 5.4:

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

Laravel 5.7'de, CSS veya JS dosyanızı Genel dizine yerleştirin.

CSS için:

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

JS için:

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

Bence en iyi yol HTML'nize BASE etiketi ekleyin

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

Bu yüzden aşağıdaki gibi şeyler kullanmak gerekli değildir

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

sadece yaz

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

size göre ve işe yarayacak.

Bu mehod, RESTful URL'leri ve statik kaynakları resimler, css, komut dosyaları olarak ele alacaktır.

Vinsa neredeyse haklıydı eklemelisin

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

ve komut dosyaları normal yollarına gitmelidir

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

bunun nedeni, Görüntü kaynağı veya ajax istekleri gibi göreli yola sahip Görüntülerin ve diğer şeylerin temel yol eklenmeden düzgün çalışmamasıdır.

Sabit kod yazarsanız, muhtemelen tam yolu kullanmalısınız (href="http://example.com/public/css/app.css" ) kullanmalısınız. Ancak bu, URL'leri geliştirme ve üretim için manuel olarak ayarlamanız gerektiği anlamına gelir.

Yukarıdaki çözümlere bir alternatif <link rel="stylesheet" href="URL::to_asset('css/app.css')" />, Laravel 3 veya <link rel="stylesheet" href="URL::asset('css/app.css')" />Laravel 4'te kullanmak olacaktır. Bu, HTML'nizi istediğiniz şekilde yazmanıza izin verir, aynı zamanda Laravel'in herhangi bir ortamda sizin için uygun yolu oluşturmasına izin verir.

Gibi kullanmanın daha iyi bir yolu,

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

Ortak klasörünüzü yeniden adlandırmadığınızı varsayalım. Css ve js dosyalarınız ortak klasörde css ve js alt klasörlerindedir. Şimdi başlığınız şöyle olacak:

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

Sadece Başka Bir Sorun Ekleyin:

/publicKullanarak projenizden kaldırmak istiyorsanız .htaccess,

bunu kullanabilirsiniz, [ İçinden publicönce ekleyin ]/cssasset()

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

[Bazen faydalıdır.]

Laravel 4 için: {!! çift ​​küme parantezi için {{
ve Laravel 5 ve üzeri sürüm için: {!! {{and !!} by}} tarafından daha yüksek sürümde

JavaScript'i özel tanımlı bir dizine yerleştirdiyseniz.
Senin Örneğin, jQuery-2.2.0.min.jsis dizin altında yerleştirilen resources/views/admin/plugins/js/dan sonra *.blade.phpher bölüm sonu olarak eklenecek mümkün olacak

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

Higher-End sürümü, Lower-End sürümünü de desteklediğinden ve tersi olmadığı için

Bunu yapmanın daha iyi ve doğru yolu:

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

Laravel 5.8'de

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

sadece benim için hile yaptı.

komut dosyanızı genel dizine koyun ve ardından kullanın (örneğin userFunctions.js için)

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