Laravel 样式表和 javascript 不会加载非基本路由

If you're using Laravel 3 and your CSS/JS files inside public folder like this

public/css
public/js

then you can call them using in Blade templates like this

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

You are using relative paths for your assets, change to an absolute path and everything will work (add a slash before "css".

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

If you do hard code it, you should probably use the full path (href="http://example.com/public/css/app.css"). However, this means you'll have to manually adjust the URLs for development and production.

An Alternative to the above solutions would be to use <link rel="stylesheet" href="URL::to_asset('css/app.css')" /> in Laravel 3 or <link rel="stylesheet" href="URL::asset('css/app.css')" /> in Laravel 4. This will allow you to write your HTML the way you want it, but also let Laravel generate the proper path for you in any environment.

For Laravel 4 & 5:

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

URL::asset will link to your project/public/ folder, so chuck your scripts in there.

i suggest you put it on route filter before on {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');


});

and using blade template engine

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

or more on laravel managing assets docs

Laravel 4

The better and correct way to do this

Adding CSS

HTML::style will link to your project/public/ folder

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

Adding JS

HTML::script will link to your project/public/ folder

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

in laravel 4 you just have to paste \{\{ URL::asset('/') }} this way:

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

It is the same for:

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

Best way in my opinion add BASE tag in your HTML

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

So it's not necessary to use things like

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

just type

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

in your view and it will works.

This mehod will deal with RESTful URLs and static resources as images, css, scripts.

in Laravel 5,
there are 2 ways to load a js file in your view
first is using html helper, second is using asset helpers.
to use html helper you have to first install this package via commandline:

composer require illuminate/html

then you need to reqister it, so go to config/app.php, and add this line to the providers array

'Illuminate\Html\HtmlServiceProvider'

then you have to define aliases for your html package so go to aliases array in config/app.php and add this

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

now your html helper is installed so in your blade view files you can write this:

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

this will look for your test.js file in your project_root/public/js/test.js.
//////////////////////////////////////////////////////////////
to use asset helpers instead of html helper, you have to write sth like this in your view files:

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

this will look for test.js file in project_root/resources/assets/test.js

Vinsa almost had it right you should add

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

and scripts should go in their regular path

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

the reason for this is because Images and other things with relative path like image source or ajax requests won't work correctly without the base path attached.

Laravel 5.4 with mix helper:

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

Better way to use like,

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

Suppose you have not renamed your public folder. Your css and js files are in css and js subfolders in public folder. Now your header will be :

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

Just Add Another Issue:

If you want to remove /public from your project using .htaccess,

then you can use this, [Add public before /css inside asset()]

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

[Sometimes, it is useful.]

For Laravel 4: {!! for a double curly brace { {
and for Laravel 5 & above version: you may replace {!! by \{\{ and !!} by }} in higher-end version

If you have placed JavaScript in a custom defined directory.
For instance, if your jQuery-2.2.0.min.js is placed under the directory resources/views/admin/plugins/js/ then from the *.blade.php you will be able to add at the end of the section as

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

Since Higher-End version supports Lower-End version also and but not vice-versa

In Laravel 5.7, put your CSS or JS file into Public directory.

For CSS:

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

For JS:

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

The better and correct way to do this:

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

In Laravel 5.8

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

just made the trick for me.

put your script file in public directory then use(for example for userFunctions.js)

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