Biểu định kiểu Laravel và javascript không tải cho các tuyến không phải cơ sở

Được rồi - tôi biết đây là một vấn đề thực sự sơ đẳng, nhưng tôi không thể hiểu được. Đây là một câu hỏi liên quan đến Laravel.

Về cơ bản, tôi có các bảng định kiểu được nhúng vào chế độ xem bố cục mặc định của mình. Tôi hiện chỉ sử dụng css thông thường để liên kết chúng, chẳng hạn như:

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

Nó hoạt động tốt khi tôi đang ở một tuyến đường cấp độ đơn lẻ như / about , nhưng ngừng hoạt động khi tôi đi sâu hơn, chẳng hạn như / about / me .

Nếu tôi nhìn vào bảng điều khiển dành cho nhà phát triển của Chrome, tôi thấy một số lỗi sau (chỉ dành cho các tuyến sâu hơn):

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

Vì vậy, rõ ràng bây giờ nó đang tìm kiếm css bên trong thư mục "about" - tất nhiên không phải là một thư mục nào cả.

Tôi chỉ muốn nó ở cùng một vị trí cho các tài sản bất kể tuyến đường.

Đối với Laravel 4 & 5:

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

URL::assetsẽ liên kết đến project/public/thư mục của bạn , vì vậy hãy đưa các tập lệnh của bạn vào đó.

Laravel 4

Cách tốt hơn và chính xác để làm điều này

Thêm CSS

HTML :: style sẽ liên kết đến dự án / công khai / thư mục của bạn

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

Thêm JS

HTML :: script sẽ liên kết đến dự án / công khai / thư mục của bạn

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

Bạn đang sử dụng đường dẫn tương đối cho nội dung của mình, hãy thay đổi thành đường dẫn tuyệt đối và mọi thứ sẽ hoạt động (thêm dấu gạch chéo trước "css".

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

trong Laravel 5 ,
có 2 cách để tải tệp js trong chế độ xem của bạn
đầu tiên là sử dụng trình trợ giúp html, thứ hai là sử dụng trình trợ giúp nội dung.
để sử dụng trình trợ giúp html, trước tiên bạn phải cài đặt gói này qua dòng lệnh:

composer require illuminate/html

sau đó bạn cần phải đăng ký lại nó, vì vậy hãy truy cập config / app.php và thêm dòng này vào mảng nhà cung cấp

'Illuminate\Html\HtmlServiceProvider'

thì bạn phải xác định bí danh cho gói html của mình, vì vậy hãy chuyển đến mảng bí danh trong config / app.php và thêm vào

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

bây giờ trình trợ giúp html của bạn đã được cài đặt nên trong các tệp dạng xem phiến của bạn, bạn có thể viết như sau:

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

điều này sẽ tìm kiếm tệp test.js của bạn trong project_root / public / js / test.js của bạn.
//////////////////////////////////////////////////////// ////////////
để sử dụng trình trợ giúp nội dung thay vì trình trợ giúp html, bạn phải viết sth như thế này trong tệp chế độ xem của mình:

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

điều này sẽ tìm kiếm tệp test.js trong project_root / resources / asset / test.js

Nếu bạn đang sử dụng Laravel 3 và các tệp CSS / JS của bạn bên trong thư mục chung như thế này

public/css
public/js

thì bạn có thể gọi chúng bằng cách sử dụng các mẫu Blade như thế này

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

tôi khuyên bạn nên đặt nó vào bộ lọc tuyến đường trước trên {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');

});

và sử dụng công cụ mẫu lưỡi

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

trở lên về tài liệu quản lý tài sản laravel

trong laravel 4bạn chỉ cần dán {{ URL::asset('/') }}theo cách này:

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

Nó cũng giống như vậy đối với:

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

Laravel 5.4 với trình trợ giúp trộn:

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

Trong Laravel 5.7, đặt tệp CSS hoặc JS của bạn vào thư mục Public.

Đối với CSS:

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

Đối với JS:

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

Theo tôi, cách tốt nhất là thêm thẻ BASE trong HTML của bạn

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

Vì vậy, không cần thiết phải sử dụng những thứ như

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

chỉ loại

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

trong tầm nhìn của bạn và nó sẽ hoạt động.

Mehod này sẽ xử lý các URL RESTful và tài nguyên tĩnh như hình ảnh, css, script.

Vinsa gần như đã có nó đúng bạn nên thêm

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

và các tập lệnh phải đi theo đường dẫn thông thường của chúng

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

lý do cho điều này là vì Hình ảnh và những thứ khác có đường dẫn tương đối như nguồn hình ảnh hoặc yêu cầu ajax sẽ không hoạt động chính xác nếu không có đường dẫn cơ sở được đính kèm.

Nếu bạn viết mã cứng, có lẽ bạn nên sử dụng đường dẫn đầy đủ (href="http://example.com/public/css/app.css" ). Tuy nhiên, điều này có nghĩa là bạn sẽ phải điều chỉnh thủ công các URL để phát triển và sản xuất.

Một Giải pháp thay thế cho các giải pháp trên sẽ được sử dụng <link rel="stylesheet" href="URL::to_asset('css/app.css')" />trong Laravel 3 hoặc <link rel="stylesheet" href="URL::asset('css/app.css')" />Laravel 4. Điều này sẽ cho phép bạn viết HTML theo cách bạn muốn, nhưng cũng cho phép Laravel tạo đường dẫn thích hợp cho bạn trong bất kỳ môi trường nào.

Cách tốt hơn để sử dụng như,

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

Giả sử bạn chưa đổi tên thư mục chung của mình. Các tệp css và js của bạn nằm trong các thư mục con css và js trong thư mục chung. Bây giờ tiêu đề của bạn sẽ là:

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

Chỉ cần thêm một vấn đề khác:

Nếu bạn muốn xóa /publickhỏi dự án của mình bằng cách sử dụng .htaccess,

thì bạn có thể sử dụng cái này, [Thêm publictrước /cssvào bên trong asset()]

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

[Đôi khi, nó hữu ích.]

Đối với Laravel 4: {!! đối với dấu ngoặc nhọn kép {{
và đối với phiên bản Laravel 5 trở lên: bạn có thể thay thế {!! bởi {{và !!} by}} trong phiên bản cao cấp hơn

Nếu bạn đã đặt JavaScript trong một thư mục được xác định tùy chỉnh.
Ví dụ: nếu của bạn jQuery-2.2.0.min.jsđược đặt trong thư mục resources/views/admin/plugins/js/thì từ thư mục, *.blade.phpbạn sẽ có thể thêm vào cuối phần dưới dạng

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

Vì phiên bản Cao cấp hơn cũng hỗ trợ phiên bản Cấp thấp hơn nhưng không phải ngược lại

Cách tốt hơn và chính xác để làm điều này:

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

Trong Laravel 5.8

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

chỉ thực hiện các thủ thuật cho tôi.

đặt tệp kịch bản của bạn trong thư mục công cộng rồi sử dụng (ví dụ: cho userFunctions.js)

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