包括主要Laravel刀片中的凉亭组件

时间:2018-01-05 16:12:48

标签: javascript laravel laravel-5 bower

为了在每个bower组件中包含我需要的所有内容,我只使用一个库(它为我安装的每个新组件创建脚本和链接标记并将它们放入我的主刀片中):

welcome.blade.php:

<!doctype html>
<html lang="{{ app()->getLocale() }}" style="height: 100%">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Work Web App</title>
    <link href="{{mix('css/app.css')}}" rel="stylesheet" type="text/css">
    <!-- bower-css:start -->
    <link href="../assets/bower_components/bootstrap-social/bootstrap-social.scss" rel="stylesheet">
    <link href="../assets/bower_components/components-font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="../assets/bower_components/components-font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="../assets/bower_components/bootstrap-social/bootstrap-social.css" rel="stylesheet">
    <!-- bower-css:end -->

</head>
<body style="height: 100%">
<div id="root" class="container-fluid wrapper" style="background: #EDF1F5; height: 100%"></div>
<script src="{{mix('js/app.js')}}" ></script>
<!-- bower-js:start -->
<script src="../assets/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../assets/bower_components/jquery/dist/jquery.js"></script>
<script src="../assets/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- bower-js:end -->
</body>
</html>

但每当我尝试访问我的应用时,我都会:

GET http://*****.test/assets/bower_components/bootstrap-social/bootstrap-social.css net::ERR_ABORTED
GET http://w*****.test/assets/bower_components/bootstrap/dist/js/bootstrap.js net::ERR_ABORTED
GET http://*****.test/assets/bower_components/jquery/dist/jquery.js net::ERR_ABORTED
GET http://*****.test/assets/bower_components/bootstrap/dist/js/bootstrap.js 404 (Not Found)

我的.bowerrc文件的配置:

{
    "directory": "resources/assets/bower_components",
    "scripts": {
        "preinstall": "bowinst preinstall %",
        "postinstall": "bowinst install %",
        "preuninstall": "bowinst uninstall %"
    }
}

1 个答案:

答案 0 :(得分:0)

Laravel附带一个package.json。所有JS deps都可以由npm install安装,并将下载到根目录的node_modules文件夹中。

要构建JS(uglify,minify和其他一些东西),您可以通过npm run dev(用于开发),npm run watch使用Laravel Mix(用于在开发模式下构建,但使用文件观察器)或npm run production(用于制作)。

所有这一切的切入点是resources/assets/js/app.js。在那里将导入bootstrap.js文件。 (记住这里的名字。它与CSS框架没什么关系。)

应该要求您在应用程序中包含任何JS库。

您可以在https://laravel.com/docs/5.5/mix

找到更多深入信息