如何链接到Laravel 5.1中的bower组件

时间:2015-10-16 18:37:41

标签: laravel laravel-5 laravel-5.1 bower blade

我正在使用bower来安装一些依赖项。我唯一的问题是尝试在我的观点中全局加载它们。

我正在尝试这样做:

<script src="{{ URL::asset('bower_components/sweetalert/dist/sweetalert-dev.js') }}"></script>
<link rel="stylesheet" href="{{ URL::asset('node_modules/sweetalert/dist/weetalert.css') }}">

结果是:

<script src="http://project.dev/bower_components/sweetalert/dist/sweetalert-dev.js"></script>
<link rel="stylesheet" href="http://project.dev/node_modules/sweetalert/dist/weetalert.css">

这显然是错误的,因为它在app目录之外。如何正确引用库?

1 个答案:

答案 0 :(得分:3)

<script><link>代码只能包含可公开访问的文件,即public文件夹内的文件。

由于bower和npm默认情况下会在public文件夹之外安装这些组件,这意味着您必须将所需组件复制到public

您可以使用gulp文件执行此操作:

var bower_path = './bower_components';
var js_path = 'public/js';

mix.copy(bower_path + '/sweetalert/dist/sweetalert-dev.js', js_path);

运行gulp,然后使用

添加到您的视图中
{{ asset("js/sweetalert-dev.js") }}

(如果可用,请复制缩小版本)

您还可以在顶级文件夹中创建.bowerrc文件,以指定应在public内安装所有bower组件,而不是bower_components

{
  "directory": "public/bower"
}

我不建议这样做,因为这会向公众公开大量文件(例如,其他人可以热链接并吸收你的带宽)