Laravel 样式表和 JavaScript 在非基础路由下无法加载

Question

Laravel 样式表和 JavaScript 在非基础路由下无法加载

105

好的，我知道这是一个非常基本的问题，但我想不出来。 这是关于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--当然实际上这并不是一个文件夹。

我只希望它无论路由如何都能在同一个地方查找资源。

- Pete

这个回答解决了你的问题吗？在Laravel视图中使用CSS？ - Pedram

20个回答

53

Laravel 4

更好、更正确的方法是这样做

添加 CSS

HTML::style 将链接到你的 project/public/ 文件夹

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

添加JS

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

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

- mXX

14

您正在使用相对路径来引用资源文件，请改为使用绝对路径并在 "css" 前添加斜杠，这样就可以正常工作了。

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

- Alexandre Danault

1

如果您的应用程序位于站点的子目录中，则此方法将无法正常工作。然后，您会遇到这样的问题，即在寻找资产时会向后查找太远。我的建议是使用@Chris提供的解决方案。这消除了所有猜测，并允许您将应用程序移动到任何位置，并确保它可以正确加载资产。 - Tim F

10

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

composer require illuminate/html

那么您需要将其注册，因此转到config/app.php，并将以下行添加到提供程序数组中

'Illuminate\Html\HtmlServiceProvider'

那么您需要为您的html包定义别名，因此请转到config/app.php中的aliases数组并添加以下内容

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

现在你已经安装了HTML助手，因此您可以在Blade视图文件中编写以下内容：

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

这将在您的项目根目录下的public/js/test.js文件中查找。
//////////////////////////////////////////////////////////////
要使用asset helpers而不是html helper，您需要在视图文件中编写类似于以下内容的代码：

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

这将在项目根目录下的resources/assets/test.js文件中查找test.js文件。

- Salar

illuminate/html已经被废弃，请使用laravelcollective/html。 - geoidesic

你也可以使用<script src="{{ url(asset('test.js')) }}"></script>（如果你使用的是 Laravel Mix，则使用<script src="{{ url(mix('test.js')) }}"></script>）。 - snipe

9

如果您使用的是 Laravel 3，并且您的 CSS/JS 文件在 public 文件夹中，如下所示：

public/css
public/js

然后你可以在 Blade 模板中像这样调用它们。

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

- Fernando Montoya

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');

});

并使用 Blade 模板引擎

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

更多关于Laravel管理资产文档的内容，请参见。

- Andry Yosua

是的，这个新的 Laravel 让一切变得复杂了，资产、甚至分析器都不再在文档中了。 - Andry Yosua

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>

- Innocent TRA BI

3

使用mix辅助函数的Laravel 5.4:

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

- Gsub

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

- fravemel

2

文莱斯几乎做对了，你应该添加

。

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

脚本和代码应该放在它们正常的路径中

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

这是因为图片和其他相对路径的东西，如图片源或ajax请求，没有附加基本路径就无法正常工作。

- Cptmaxon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gan · Accepted Answer

适用于 Laravel 4 和 5：

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

URL::asset函数将链接到你的project/public/文件夹，所以将你的脚本文件放在那里。

^{注意：你需要使用"Blade模板引擎"，Blade文件的扩展名是.blade.php。}