สไตล์ชีตและจาวาสคริปต์ Laravel ไม่โหลดสำหรับเส้นทางที่ไม่ใช่ฐาน

โอเค - ฉันรู้ว่านี่เป็นปัญหาเบื้องต้นจริงๆ แต่ฉันคิดไม่ออก นี่คือคำถามเกี่ยวกับ Laravel

โดยทั่วไปฉันมีสไตล์ชีตของฉันฝังอยู่ในมุมมองเค้าโครงเริ่มต้นของฉัน ขณะนี้ฉันใช้ css ปกติเพื่อเชื่อมโยงเช่น:

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

มันทำงานได้ดีเมื่อฉันที่เป็นเส้นทางที่ระดับเดียวเช่น/ เกี่ยวกับแต่หยุดการทำงานเมื่อฉันไปลึกเช่น/ เกี่ยวกับ / ฉัน

หากฉันดูคอนโซลนักพัฒนาซอฟต์แวร์ของ 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/โฟลเดอร์ของคุณดังนั้นให้โยนสคริปต์ของคุณไปที่นั่น

ลาราเวล 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 คุณต้องติดตั้งแพ็คเกจนี้ก่อนผ่าน commandline:

composer require illuminate/html

จากนั้นคุณต้องตั้งค่าใหม่ดังนั้นไปที่ config / app.php และเพิ่มบรรทัดนี้ในอาร์เรย์ผู้ให้บริการ

'Illuminate\Html\HtmlServiceProvider'

จากนั้นคุณต้องกำหนดนามแฝงสำหรับแพ็คเกจ html ของคุณดังนั้นไปที่ aliases array ใน config / app.php และเพิ่มสิ่งนี้

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

ตอนนี้ตัวช่วย html ของคุณได้รับการติดตั้งแล้วดังนั้นในไฟล์มุมมองเบลดของคุณคุณสามารถเขียนสิ่งนี้:

{!! 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 URLs และทรัพยากรแบบคงที่เป็นรูปภาพ, css, สคริปต์

Vinsa เกือบจะมีสิทธิ์ที่คุณควรเพิ่ม

<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 ขึ้นไป: คุณสามารถแทนที่ {!! โดย {{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>

เนื่องจากเวอร์ชันระดับไฮเอนด์รองรับเวอร์ชันระดับล่างเช่นกันและ แต่ไม่ใช่ในทางกลับกัน

วิธีที่ดีกว่าและถูกต้องในการทำสิ่งนี้:

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