Stylesheet laravel dan javascript tidak dimuat untuk rute non-basis

Oke - Saya tahu ini masalah yang sangat mendasar, tapi saya tidak bisa memahaminya. Ini pertanyaan tentang Laravel.

Pada dasarnya, saya memiliki lembar gaya yang disematkan dalam tampilan tata letak default saya. Saat ini saya hanya menggunakan css biasa untuk menautkannya, seperti:

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

Ini berfungsi dengan baik saat saya berada di rute tingkat tunggal seperti / tentang , tetapi berhenti berfungsi saat saya masuk lebih dalam, seperti / tentang / saya .

Jika saya melihat konsol pengembang Chrome, saya melihat beberapa kesalahan berikut (hanya untuk rute yang lebih dalam):

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

Jadi jelas sekarang mencari css di dalam folder "tentang" - yang tentu saja bukan folder sama sekali.

Saya hanya ingin melihat aset di tempat yang sama terlepas dari rutenya.

Untuk Laravel 4 & 5:

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

URL::assetakan menautkan ke project/public/folder Anda , jadi buang skrip Anda di sana.

Laravel 4

Cara yang lebih baik dan benar untuk melakukan ini

Menambahkan CSS

HTML :: style akan ditautkan ke folder proyek / publik / Anda

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

Menambahkan JS

HTML :: script akan ditautkan ke folder proyek / publik / Anda

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

Anda menggunakan jalur relatif untuk aset Anda, ubah ke jalur absolut dan semuanya akan berfungsi (tambahkan garis miring sebelum "css".

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

di Laravel 5 ,
ada 2 cara untuk memuat file js di tampilan Anda
pertama adalah menggunakan helper html, kedua menggunakan pembantu aset.
untuk menggunakan html helper Anda harus menginstal paket ini terlebih dahulu melalui commandline:

composer require illuminate/html

maka Anda perlu mendaftarkannya kembali, jadi buka config / app.php, dan tambahkan baris ini ke array penyedia

'Illuminate\Html\HtmlServiceProvider'

maka Anda harus mendefinisikan alias untuk paket html Anda, jadi buka aliases array di config / app.php dan tambahkan ini

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

sekarang helper html Anda diinstal sehingga di file tampilan blade Anda, Anda dapat menulis ini:

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

ini akan mencari file test.js Anda di project_root / public / js / test.js.
//////////////////////////////////////////////// ////////////
untuk menggunakan asset helper sebagai ganti html helper, Anda harus menulis sth seperti ini di file view Anda:

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

ini akan mencari file test.js di project_root / resources / assets / test.js

Jika Anda menggunakan Laravel 3 dan file CSS / JS Anda di dalam folder publik seperti ini

public/css
public/js

lalu Anda dapat memanggil mereka menggunakan template Blade seperti ini

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

saya sarankan Anda meletakkannya di filter rute sebelum di {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');

});

dan menggunakan mesin template blade

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

atau lebih lanjut tentang dokumen pengelolaan aset tingkat

di laravel 4Anda hanya perlu menempelkan {{ URL::asset('/') }}cara ini:

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

Itu sama untuk:

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

Laravel 5.4 dengan mix helper:

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

Di Laravel 5.7, masukkan file CSS atau JS Anda ke direktori Publik.

Untuk CSS:

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

Untuk JS:

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

Cara terbaik menurut saya adalah menambahkan tag BASE di HTML Anda

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

Jadi tidak perlu menggunakan hal-hal seperti

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

ketik saja

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

dalam pandangan Anda dan itu akan berhasil.

Metode ini akan menangani URL RESTful dan sumber daya statis sebagai gambar, css, skrip.

Vinsa hampir benar, Anda harus menambahkan

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

dan skrip harus berada di jalur regulernya

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

alasan untuk ini adalah karena Gambar dan hal-hal lain dengan jalur relatif seperti sumber gambar atau permintaan ajax tidak akan berfungsi dengan benar tanpa jalur dasar terpasang.

Jika Anda melakukan kode keras, Anda mungkin harus menggunakan jalur lengkap (href="http://example.com/public/css/app.css" ). Namun, ini berarti Anda harus menyesuaikan URL secara manual untuk pengembangan dan produksi.

Alternatif solusi di atas akan digunakan <link rel="stylesheet" href="URL::to_asset('css/app.css')" />di Laravel 3 atau <link rel="stylesheet" href="URL::asset('css/app.css')" />di Laravel 4. Ini akan memungkinkan Anda untuk menulis HTML seperti yang Anda inginkan, tetapi juga membiarkan Laravel menghasilkan jalur yang tepat untuk Anda di lingkungan mana pun.

Cara yang lebih baik untuk menggunakan seperti,

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

Misalkan Anda belum mengganti nama folder publik Anda. File css dan js Anda ada di subfolder css dan js di folder publik. Sekarang tajuk Anda akan menjadi:

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

Tambahkan Masalah Lain:

Jika Anda ingin menghapus /publicdari proyek Anda menggunakan .htaccess,

maka Anda dapat menggunakan ini, [Tambahkan publicsebelum /cssdi dalam asset()]

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

[Terkadang, itu berguna.]

Untuk Laravel 4: {!! untuk penjepit keriting ganda {{
dan untuk Laravel 5 & versi di atasnya: Anda dapat mengganti {!! oleh {{and !!} by}} dalam versi yang lebih canggih

Jika Anda telah menempatkan JavaScript di direktori yang ditentukan khusus.
Misalnya, jika Anda jQuery-2.2.0.min.jsditempatkan di bawah direktori resources/views/admin/plugins/js/maka dari itu *.blade.phpAnda akan dapat menambahkan di akhir bagian sebagai

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

Karena versi High-End mendukung versi Lower-End juga dan tetapi tidak sebaliknya

Cara yang lebih baik dan benar untuk melakukan ini:

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

Di Laravel 5.8

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

baru saja membuat trik untuk saya.

letakkan file skrip Anda di direktori publik lalu gunakan (misalnya untuk userFunctions.js)

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