Laravel样式表和javascript无法为非基本路线加载


97

好的-我知道这是一个非常基本的问题,但我无法弄清楚。这是关于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-当然,它根本不是一个文件夹。

我只希望它在同一位置查找资产,而不管路线如何。

Answers:


168

对于Laravel 4和5:

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

URL::asset将会链接到您的project/public/文件夹,因此请在其中保存脚本。


注意:为此,您需要使用“ 刀片模板引擎 ”。刀片文件使用.blade.php扩展名。


8
只需确认它在Laravel 5和5.1中也可以使用。谢谢。
FilipFilipović15年

1
我已经创建了自己的包。我可以在里面放css吗?如果是这样,我如何从自己的软件包中包含CSS?
chourn solidet

您还可以使用的asset()辅助方法实例URL::asset()。它执行相同的工作。
Marek Skiba

3
同样适用于Laravel 5.4
user3426112 '17

如果您要在生产中使用缩小版而不在开发中怎么办?
geodesic

52

Laravel 4

更好,更正确的方法

添加CSS

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

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

添加JS

HTML :: script将链接到您的项目/ public /文件夹

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

13

您正在为资产使用相对路径,更改为绝对路径,一切都会正常工作(在“ css”前添加斜杠。

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

如果您的应用程序位于站点的子目录中,则此方法将无效。然后,您遇到了一个问题,即您对资产的期望太高了。我的建议是使用@Chris提供的解决方案。这消除了所有的猜测,并允许您将应用程序移动到任何地方,并且仍然确保它将正确加载资产。
Tim F

10

在Laravel 5中
有两种方法可以在视图中加载js文件,
一种是使用html helper,第二种是使用资产助手。
要使用html helper,您必须首先通过命令行安装此软件包:

composer require illuminate/html

那么您需要重新整理它,因此转到config / app.php,并将此行添加到providers数组

'Illuminate\Html\HtmlServiceProvider'

那么您必须为您的html包定义别名,因此转到config / app.php中的aliases数组并添加此

'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文件


illuminate / html已被放弃。而是用户laravelcollective / html。
geodesic

您也可以使用<script src="{{ url(asset('test.js')) }}"></script>(或 <script src="{{ url(mix('test.js')) }}"></script>使用Laravel Mix)。
狙击

9

如果您正在使用Laravel 3和公共文件夹中的CSS / JS文件,如下所示

public/css
public/js

然后您可以在Blade模板中使用它们来调用它们

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

6

我建议您先将其放在{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使一切都变得复杂,资产,甚至探查不在文档了..
安德里Yosua

3

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

3

带有混合助手的Laravel 5.4:

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

3

在Laravel 5.7中,将CSS或JS文件放入Public目录。

对于CSS:

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

对于JS:

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

2

我认为最好的方法是在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,脚本。


2

Vinsa几乎正确,您应该添加

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

脚本应该按常规路径

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

这样做的原因是,如果没有附加基本路径,图像和具有相对路径的其他内容(例如图像源或ajax请求)将无法正常工作。


1

如果您对其进行硬编码,则可能应该使用完整路径(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在任何环境中为您生成正确的路径。


1

更好的使用方式,例如

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

1

假设您尚未重命名公用文件夹。您的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>

1

只需添加另一个问题:

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

那么你可以使用这个,[添加public之前/css里面asset()]

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

[有时,它很有用。]


0

对于Laravel 4:{!! 为双大括号{{
和Laravel 5及更高版本:您可以替换{!! 由{{和!!}由}}(在更高版本中)

如果已将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>

由于高端版本也支持低端版本,但反之亦然


0

更好和正确的方法可以做到这一点:

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

0

在Laravel 5.8中

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

刚刚为我做了把戏。


0

将您的脚本文件放在公共目录中,然后使用(例如,用于userFunctions.js)

<script type="text/javascript" src="{{asset('js/userFunctions.js')}}">
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.