Folhas de estilo do Laravel e javascript não carregam para rotas não básicas

Ok - eu sei que este é um problema realmente elementar, mas não consigo descobrir. Essa é uma pergunta em relação ao Laravel.

Basicamente, tenho minhas folhas de estilo incorporadas em minha visualização de layout padrão. No momento, estou usando apenas css normal para vinculá-los, como:

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

Funciona muito bem quando estou em uma rota de nível único, como / sobre , mas para de funcionar quando vou mais fundo, como / sobre / mim .

Se eu olhar o console do desenvolvedor do Chrome, vejo alguns dos seguintes erros (apenas para as rotas mais profundas):

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

Está claro que agora ele está procurando o css dentro da pasta "about" - que obviamente não é uma pasta.

Eu só quero que ele olhe no mesmo lugar para os ativos, independentemente da rota.

Para Laravel 4 e 5:

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

URL::assetirá vincular a sua project/public/pasta, então jogue seus scripts lá.

Laravel 4

A maneira melhor e correta de fazer isso

Adicionando CSS

HTML :: style irá vincular ao seu projeto / public / pasta

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

Adicionando JS

HTML :: script irá vincular ao seu projeto / public / pasta

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

Você está usando caminhos relativos para seus ativos, mude para um caminho absoluto e tudo funcionará (adicione uma barra antes de "css".

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

no Laravel 5 ,
existem 2 maneiras de carregar um arquivo js em sua visão,
primeiro usando html helper, a segunda é usando asset helpers.
para usar o helper html, você deve primeiro instalar este pacote via linha de comando:

composer require illuminate/html

então você precisa reqister, então vá para config / app.php, e adicione esta linha ao array de fornecedores

'Illuminate\Html\HtmlServiceProvider'

então você tem que definir aliases para o seu pacote html, então vá para a matriz aliases em config / app.php e adicione isto

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

agora seu helper html está instalado para que você possa escrever isto nos seus arquivos de visualização em lâmina:

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

isso irá procurar seu arquivo test.js em seu project_root / public / js / test.js.
//////////////////////////////////////////////////////// ////////////
para usar auxiliares de ativos em vez de auxiliares html, você deve escrever sth assim em seus arquivos de visualização:

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

isso irá procurar o arquivo test.js em project_root / resources / assets / test.js

Se você estiver usando o Laravel 3 e seus arquivos CSS / JS dentro de uma pasta pública como esta

public/css
public/js

então você pode chamá-los usando em modelos Blade como este

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

Sugiro que você coloque no filtro de rota antes de {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');

});

e usando o motor de modelo de lâmina

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

ou mais em documentos de ativos de gerenciamento de laravel

em laravel 4você só tem que colar {{ URL::asset('/') }}desta forma:

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

É o mesmo para:

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

Laravel 5.4 com mix helper:

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

No Laravel 5.7, coloque seu arquivo CSS ou JS no diretório Público.

Para CSS:

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

Para JS:

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

Melhor maneira, na minha opinião, de adicionar a tag BASE ao seu HTML

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

Portanto, não é necessário usar coisas como

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

apenas digite

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

em sua visão e funcionará.

Este método irá lidar com URLs RESTful e recursos estáticos como imagens, css, scripts.

Vinsa quase acertou, você deve adicionar

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

e os scripts devem seguir seu caminho normal

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

a razão para isso é porque as imagens e outras coisas com caminho relativo, como origem da imagem ou solicitações ajax, não funcionarão corretamente sem o caminho base anexado.

Se você o codificar, provavelmente deve usar o caminho completo ( href="http://example.com/public/css/app.css"). No entanto, isso significa que você terá que ajustar manualmente os URLs para desenvolvimento e produção.

Uma alternativa para as soluções acima seria usar <link rel="stylesheet" href="URL::to_asset('css/app.css')" />no Laravel 3 ou <link rel="stylesheet" href="URL::asset('css/app.css')" />no Laravel 4. Isso permitirá que você escreva seu HTML da maneira que quiser, mas também permitirá que o Laravel gere o caminho adequado para você em qualquer ambiente.

Melhor maneira de usar como,

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

Suponha que você não tenha renomeado sua pasta pública. Seus arquivos css e js estão nas subpastas css e js na pasta pública. Agora seu cabeçalho será:

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

Basta adicionar outro problema:

Se você deseja remover /publicdo seu projeto usando .htaccess,

então você pode usar isto, [Adicionar publicantes de /cssdentro asset()]

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

[Às vezes, é útil.]

Para o Laravel 4: {!! para uma chave dupla {{
e para a versão do Laravel 5 e superior: você pode substituir {!! por {{e !!} por}} na versão de ponta

Se você colocou o JavaScript em um diretório definido de forma personalizada.
Por exemplo, se o seu jQuery-2.2.0.min.jsfor colocado no diretório resources/views/admin/plugins/js/, em, *.blade.phpvocê poderá adicionar no final da seção como

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

Uma vez que a versão Higher-End suporta a versão Lower-End também e mas não vice-versa

A maneira melhor e correta de fazer isso:

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

No Laravel 5.8

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

acabou de fazer o truque para mim.

coloque seu arquivo de script no diretório público e use (por exemplo para userFunctions.js)

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