Laravel-Stylesheets und Javascript werden für Routen ohne Basis nicht geladen

Okay - ich weiß, dass dies ein wirklich elementares Problem ist, aber ich kann es nicht herausfinden. Dies ist eine Frage zu Laravel.

Grundsätzlich habe ich meine Stylesheets in meine Standardlayoutansicht eingebettet. Ich verwende derzeit nur reguläres CSS, um sie zu verlinken, wie zum Beispiel:

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

Es funktioniert hervorragend, wenn ich mich auf einer einstufigen Route wie / about befinde, funktioniert aber nicht mehr, wenn ich tiefer gehe, wie / about / me .

Wenn ich mir die Entwicklerkonsole von Chrome ansehe, werden einige der folgenden Fehler angezeigt (nur für die tieferen Routen):

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

Es ist also klar, dass jetzt nach dem CSS im Ordner "about" gesucht wird - was natürlich überhaupt kein Ordner ist.

Ich möchte nur, dass es unabhängig von der Route an derselben Stelle nach den Assets sucht.

Für Laravel 4 & 5:

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

URL::assetwird auf Ihren project/public/Ordner verlinken , also werfen Sie Ihre Skripte dort hinein.

Laravel 4

Der bessere und korrekte Weg, dies zu tun

CSS hinzufügen

HTML :: style wird mit Ihrem Projekt / public / folder verknüpft

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

JS hinzufügen

HTML :: script wird mit Ihrem Projekt / public / folder verknüpft

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

Sie verwenden relative Pfade für Ihre Assets, wechseln zu einem absoluten Pfad und alles wird funktionieren (fügen Sie vor "css" einen Schrägstrich hinzu.

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

in Laravel 5 ,
gibt es 2 Möglichkeiten , eine js - Datei in Ihrer Ansicht laden
wird unter Verwendung eines ersten html Helfer, zweite Asset Helfer verwendet.
Um den HTML-Helfer zu verwenden, müssen Sie dieses Paket zuerst über die Befehlszeile installieren:

composer require illuminate/html

Dann müssen Sie es erneut anfordern. Gehen Sie also zu config / app.php und fügen Sie diese Zeile dem Provider-Array hinzu

'Illuminate\Html\HtmlServiceProvider'

Dann müssen Sie Aliase für Ihr HTML-Paket definieren. Gehen Sie also zum Aliase-Array in config / app.php und fügen Sie dieses hinzu

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

Jetzt ist Ihr HTML-Helfer installiert, sodass Sie Folgendes in Ihre Blade-View-Dateien schreiben können:

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

Dadurch wird nach Ihrer Datei test.js in Ihrer project_root / public / js / test.js gesucht.
///////////////////////////////////////////////////////// //////////// Um
Asset-Helfer anstelle des HTML-Helfers zu verwenden, müssen Sie etw wie folgt in Ihre Ansichtsdateien schreiben:

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

Dadurch wird nach der Datei test.js in project_root / resources / assets / test.js gesucht

Wenn Sie Laravel 3 und Ihre CSS / JS-Dateien in einem öffentlichen Ordner wie diesem verwenden

public/css
public/js

Dann können Sie sie in solchen Blade-Vorlagen aufrufen

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

Ich schlage vor, Sie setzen es auf Route Filter vor {Projekt} /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');

});

und Verwenden der Blade Template Engine

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

oder mehr über die Verwaltung von Assets-Dokumenten

in müssen laravel 4Sie nur so einfügen {{ URL::asset('/') }}:

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

Es ist dasselbe für:

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

Laravel 5.4 mit Mix-Helfer:

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

Legen Sie in Laravel 5.7 Ihre CSS- oder JS-Datei im öffentlichen Verzeichnis ab.

Für CSS:

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

Für JS:

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

Der beste Weg meiner Meinung nach, BASE-Tag in Ihren HTML-Code einzufügen

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

Es ist also nicht notwendig, Dinge wie zu verwenden

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

Schreib einfach

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

aus Ihrer Sicht und es wird funktionieren.

Diese Methode behandelt RESTful-URLs und statische Ressourcen als Bilder, CSS und Skripte.

Vinsa hatte es fast richtig, sollten Sie hinzufügen

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

und Skripte sollten ihren regulären Weg gehen

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

Der Grund dafür ist, dass Bilder und andere Dinge mit einem relativen Pfad wie Bildquelle oder Ajax-Anforderungen ohne den angehängten Basispfad nicht richtig funktionieren.

Wenn Sie es hart codieren, sollten Sie wahrscheinlich den vollständigen Pfad verwenden (href="http://example.com/public/css/app.css" ) verwenden. Dies bedeutet jedoch, dass Sie die URLs für Entwicklung und Produktion manuell anpassen müssen.

Eine Alternative zu den oben genannten Lösungen wäre die Verwendung <link rel="stylesheet" href="URL::to_asset('css/app.css')" />in Laravel 3 oder <link rel="stylesheet" href="URL::asset('css/app.css')" />Laravel 4. Auf diese Weise können Sie Ihren HTML-Code so schreiben, wie Sie es möchten, aber Laravel kann in jeder Umgebung den richtigen Pfad für Sie generieren.

Besserer Weg, wie zu verwenden,

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

Angenommen, Sie haben Ihren öffentlichen Ordner nicht umbenannt. Ihre CSS- und JS-Dateien befinden sich in CSS- und JS-Unterordnern im öffentlichen Ordner. Jetzt lautet Ihr Header:

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

Fügen Sie einfach ein weiteres Problem hinzu:

Wenn Sie mit /publicaus Ihrem Projekt entfernen möchten .htaccess,

dann können Sie dies verwenden, [ publicVorher hinzufügen /cssinnen asset()]

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

[Manchmal ist es nützlich.]

Für Laravel 4: {!! für eine doppelte geschweifte Klammer {{
und für die Version ab Laravel 5: Sie können {!! von {{und !!} von}} in der High-End-Version

Wenn Sie JavaScript in einem benutzerdefinierten Verzeichnis abgelegt haben.
Zum Beispiel, wenn Ihr jQuery-2.2.0.min.jsunter dem Verzeichnis gespeichert , resources/views/admin/plugins/js/dann von der *.blade.phpwerden Sie am Ende des Abschnitts hinzufügen können , wie

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

Da die Higher-End-Version auch die Lower-End-Version unterstützt und nicht umgekehrt

Der bessere und korrekte Weg, dies zu tun:

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

In Laravel 5.8

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

habe gerade den Trick für mich gemacht.

Legen Sie Ihre Skriptdatei in einem öffentlichen Verzeichnis ab und verwenden Sie sie (z. B. für userFunctions.js).

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