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

Laravel stylesheets and javascript don't load for non-base routes

提问by Pete

Okay--I know this is a really elementary issue, but I can't figure it out. This is a question regarding Laravel.

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

Basically, I have my stylesheets embedded in my default layout view. I'm currently just using regular css to link them, such as:

基本上，我在我的默认布局视图中嵌入了我的样式表。我目前只是使用常规 css 来链接它们，例如：

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

It works great when I am at a single level route such as /about, but stops working when I go deeper, such as /about/me.

当我在诸如/about 之类的单层路线上时它很有效，但当我走得更深时它就停止工作了，例如/about/me。

If I look at Chrome's developer console I see some of the following errors (only for the deeper routes):

如果我查看 Chrome 的开发者控制台，我会看到以下一些错误（仅适用于更深层次的路由）：

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

So clearly it is now looking for the css inside the "about" folder--which of course isn't a folder at all.

很明显，它现在正在“about”文件夹中寻找 css——这当然根本不是一个文件夹。

I just want it to look in the same place for the assets regardless of the route.

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

回答by gan

For Laravel 4 & 5:

对于 Laravel 4 和 5：

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

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

URL::asset将链接到您的project/public/文件夹，因此将您的脚本放在那里。

---

---

^{Note:For this, you need to use the "Blade templating engine". Blade files use the .blade.phpextension.注意：为此，您需要使用“刀片模板引擎”。Blade 文件使用.blade.php扩展名。}

回答by mXX

Laravel 4

Laravel 4

The better and correct way to do this

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

Adding CSS

添加 CSS

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

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

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

Adding JS

添加JS

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

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

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

回答by Alexandre Danault

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

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

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

回答by Salar

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:

在 Laravel 5 中，
有两种方法可以在视图中加载 js 文件，
第一种是使用 html 帮助程序，第二种是使用资产帮助程序。
要使用 html helper，你必须首先通过命令行安装这个包：

composer require illuminate/html

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

那么你需要重新注册它，所以去 config/app.php，并将这一行添加到 providers 数组中

'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 包定义别名所以去 config/app.php 中的别名数组并添加这个

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

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

现在您的 html 助手已安装，因此您可以在刀片视图文件中编写以下内容：

{!! 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:

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

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

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

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

回答by Fernando Montoya

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

如果你使用 Laravel 3 和你的 CSS/JS 文件在 public 文件夹中，像这样

public/css
public/js

then you can call them using in Blade templates like this

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

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

回答by Andry Yosua

i suggest you put it on route filter before on {project}/application/routes.php

我建议你在 {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 管理资产的文档

回答by fravemel

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

在laravel 4你只需要这样粘贴{{ URL::asset('/') }}：

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

回答by Gsub

Laravel 5.4 with mix helper:

带有混合助手的 Laravel 5.4：

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

回答by Innocent TRA BI

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

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

For CSS:

对于 CSS：

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

For JS:

对于JS：

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

回答by vinsa

Best way in my opinion add BASE tag in your HTML

我认为最好的方法是在 HTML 中添加 BASE 标签

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

此方法将处理 RESTful URL 和静态资源，如图像、CSS、脚本。