Laravel 样式表和 javascript 不会为非基础路由加载答案

【问题标题】：Laravel stylesheets and javascript don't load for non-base routesLaravel 样式表和 javascript 不会为非基础路由加载
【发布时间】：2013-02-20 08:57:48
【问题描述】：

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

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

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

当我在 /about 等单层路线时效果很好，但当我更深入时停止工作，例如 /about/me。 p>

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

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

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

我只想让它在同一个地方寻找资产，而不管路线如何。

【问题讨论】：

这能回答你的问题吗？ Using CSS in Laravel views?

标签： php laravel blade

【解决方案1】：

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

public/css
public/js

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

如果您的应用位于站点的子目录中，这将不起作用。然后，您会遇到一个问题，即您对资产的回顾太远了。我的建议是使用@Chris 提供的解决方案。这消除了所有猜测，并允许您将您的应用程序移动到任何地方，并仍然确保它能够正确加载资产。

【解决方案3】：

如果您对其进行硬编码，您可能应该使用完整路径 (href="http://example.com/public/css/app.css")。但是，这意味着您必须手动调整用于开发和生产的 URL。

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

【讨论】：

【解决方案4】：

对于 Laravel 4 和 5：

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

URL::asset 将链接到您的 project/public/ 文件夹，因此请将您的脚本放入其中。

^{注意：为此，您需要使用“Blade templating engine”。 Blade 文件使用 .blade.php 扩展名。}

【讨论】：

只需确认它在 Laravel 5 和 5.1 中也能正常工作。谢谢。
我已经创建了自己的包。我可以在里面有css吗？如果是这样，我如何从自己的包中包含 css？
您也可以使用URL::asset() 的asset() 辅助方法即时。它做同样的工作。
也适用于 Laravel 5.4。
如果您想要在生产中而不是在开发中的缩小版本怎么办？

【解决方案5】：

我建议你在 {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 managing assets docs

【讨论】：

是的，这个新的 laravel 让一切变得复杂，资产，甚至分析器都不再在文档中了..

【解决方案6】：

Laravel 4

更好更正确的方法

添加 CSS

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

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

添加 JS

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

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

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

我认为在 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、脚本。

【讨论】：

【解决方案9】：

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

composer require illuminate/html

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

'Illuminate\Html\HtmlServiceProvider'

然后您必须为您的 html 包定义别名，因此请转到 config/app.php 中的别名数组并添加此

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

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

{!! 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 代替。
你也可以使用<script src="{{ url(asset('test.js')) }}"></script>（或者<script src="{{ url(mix('test.js')) }}"></script>，如果你使用的是Laravel Mix）。

【解决方案10】：

Vinsa 几乎是对的你应该添加

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

并且脚本应该进入它们的常规路径

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

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

【讨论】：

【解决方案11】：

带有混合助手的 Laravel 5.4：

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

【讨论】：

【解决方案12】：

更好的使用方式，

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

【讨论】：

【解决方案13】：

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

【讨论】：

【解决方案14】：

只需添加另一个问题：

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

然后你可以使用这个，[在/css之前添加publicasset()]

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

[有时，它很有用。]

【讨论】：

【解决方案15】：

对于 Laravel 4：{!!对于双花括号 { {
对于 Laravel 5 及以上版本：您可以替换 {!!由 {{ and !!} by }} 在高端版本中

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

因为高端版本也支持低端版本，但反之不支持

【讨论】：

【解决方案16】：

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

【讨论】：

【解决方案17】：

更好更正确的方法：

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

【讨论】：

【解决方案18】：

在 Laravel 5.8 中

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

刚刚为我做了诡计。

【讨论】：

【解决方案19】：

把你的脚本文件放到公共目录然后使用（例如userFunctions.js）

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

【讨论】：