LaravelスタイルシートとJavaScriptが非ベースルートで読み込まれない

わかりました-これは本当に初歩的な問題であることは知っていますが、理解できません。これはLaravelに関する質問です。

基本的に、デフォルトのレイアウトビューにスタイルシートが埋め込まれています。私は現在、それらをリンクするために通常のCSSを使用しています：

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

/ aboutなどの単一レベルのルートにいるときはうまく機能しますが、/ about / meなどのように深くなると機能しなくなります。

Chromeのデベロッパーコンソールを見ると、次のエラーがいくつか表示されます（より深いルートのみ）。

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

したがって、明らかに、「about」フォルダ内のcssを探しています。もちろん、これはまったくフォルダではありません。

ルートに関係なく、同じ場所でアセットを検索したいだけです。

Laravel 4および5の場合：

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

URL::assetproject/public/フォルダにリンクするので、スクリプトをそこに入れます。

ララヴェル4

これを行うためのより良い正しい方法

CSSの追加

HTML :: styleは、project / public /フォルダーにリンクします

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

JSの追加

HTML :: scriptは、project / public /フォルダーにリンクします

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

アセットに相対パスを使用しており、絶対パスに変更すると、すべてが機能します（「css」の前にスラッシュを追加します）。

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

Laravel 5では
、ビューにjsファイルをロードする方法は2つあります。1つ
はhtmlヘルパーを使用する方法、もう1つはアセットヘルパーを使用する方法です。
HTMLヘルパーを使用するには、最初にこのパッケージをコマンドラインからインストールする必要があります。

composer require illuminate/html

次に、それを再要求する必要があるため、config / app.phpに移動し、この行をプロバイダー配列に追加します

'Illuminate\Html\HtmlServiceProvider'

次に、htmlパッケージのエイリアスを定義する必要があるため、config / app.phpのエイリアス配列に移動して、これを追加します

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

これでHTMLヘルパーがインストールされたので、ブレードビューファイルで次のように記述できます。

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

これにより、project_root / public / js / test.jsでtest.jsファイルが検索されます。
////////////////////////////////////////////////// ////////////
HTMLヘルパーの代わりにアセットヘルパーを使用するには、ビューファイルに次のようにsthを記述する必要があります。

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

これは、project_root / resources / assets / test.jsでtest.jsファイルを探します。

Laravel 3とCSS / JSファイルをこのようなパブリックフォルダ内で使用している場合

public/css
public/js

次に、このようなブレードテンプレートを使用してそれらを呼び出すことができます

{{ 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>

私の意見では最善の方法は、HTMLにBASEタグを追加することです

<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なURLと静的リソースを画像、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')}}">