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

好的 – 我知道这是一个非常基本的问题,但我无法弄清楚。 这是关于Laravel的一个问题。

基本上,我有我的样式表embedded我的默认布局视图。 我目前只是使用常规的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". 

所以很明显,现在正在寻找“约”文件夹中的CSS – 这当然不是一个文件夹。

我只是希望它在相同的地方寻找资产,不pipe路线如何。

对于Laravel 4&5:

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

URL ::资源将链接到你的项目/公共/文件夹,所以把你的脚本放在那里。

注意:您将需要使用刀片模板来使用它。 所有刀片模板应使用.blade.php扩展名。

Laravel 4

更好和正确的方法来做到这一点

添加CSS

HTML :: style将链接到你的项目/公共/文件夹

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

添加JS

HTML ::脚本将链接到您的项目/公共/文件夹

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

我认为你使用Laravel 3,如果是你的CSS / JS文件在公共文件夹中

 public/css public/js 

并使用刀片模板进行调用

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

你正在使用相对path为你的资产,改变到绝对path,一切都会工作(在“css”之前添加一个斜杠。

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

在Laravel 5
有两种方法可以在你的视图中加载一个js文件
首先是使用html helper,其次是使用资产助手。
要使用html助手,你必须首先通过命令行来安装这个包:

 composer require illuminate/html 

那么你需要重新调用它,所以去config / app.php,并将这一行添加到providers数组

 'Illuminate\Html\HtmlServiceProvider' 

那么你必须为你的html包定义别名,所以去config / app.php别名数组,并添加这个

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

现在你的html helper被安装在你的刀片视图文件中,你可以这样写:

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

这将在您的project_root / public / js / test.js中查找您的test.js文件。
////////////////////////////////////////////////// ////////////
要使用资产助手而不是html助手,你必须在你的视图文件中这样写:

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

这将在project_root / resources / assets / test.js中查找test.js文件

我build议你把它放在{project} /application/routes.php之前的路由filter上

 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(); }} 

或更多laravelpipe理资产文档

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

我认为最好的方法是在你的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> 

在你看来,它会起作用。

这个方法将把REST风格的URL和静态资源处理为图像,CSS,脚本。

Vinsa几乎没有错,你应该补充

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

脚本应该按照正常的path走

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

原因是因为没有附加基path,图像和其他具有相对path(如图像源或ajax请求)的东西将无法正常工作。

Laravel 5.4与混合助手:

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

如果你使用硬编码,你应该使用完整path( href="http://example.com/public/css/app.css" )。 但是,这意味着您将不得不手动调整开发和生产的URL。

上述解决scheme的替代方法是在Laravel 3或<link rel="stylesheet" href="URL::asset('css/app.css')" />使用<link rel="stylesheet" href="URL::to_asset('css/app.css')" />在Laravel 4中的<link rel="stylesheet" href="URL::asset('css/app.css')" /> 。这将允许你以你想要的方式编写你的HTML,但也让Laravel在任何环境中为你生成正确的path。

更好的方式来使用,

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

只需添加另一个问题:

如果你想使用.htaccess从项目中删除/public

那么你可以使用这个,[在asset()内的/css内添加public

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

[有时候,这是有用的。]