将资产包含到包的刀片视图中 - Laravel答案

【问题标题】：Include assets into package's blade view - Laravel将资产包含到包的刀片视图中 - Laravel
【发布时间】：2017-05-10 11:40:37
【问题描述】：

我正在使用 Laravel 5.4 创建一个包。我需要在刀片模板中包含一些资产（js、CSS 和图像）。我怎样才能做到这一点？

我尝试过asset()，但它不起作用。

这是我的包的文件夹结构：

root
  --package
     -- vendor_name
        -- package_name
           -- src
              -- assets
                 -- js
                    -- login.js
                 --css
                    -- login.css
              -- views
                 -- login.blade.php

如果不将它们发布到公用文件夹中，是否有可能？

谢谢

【问题讨论】：

asset() 提供了您的 laravel 项目公共目录的路径。您的文件似乎在供应商目录中。对吗？
不可能像你这样。浏览器将尝试使用 HTTP 请求加载 CSS 引用和 Javascript 源，并且对 Laravel 的 HTTP 请求开放的唯一文件夹是 public 文件夹。当您谈论一个包并且许多安装遵循良好实践时，您必须将它们移动到公用文件夹，正如答案已经暗示的那样。

标签： laravel blade laravel-5.4

【解决方案1】：

在 Laravel 5.4 中你可以使用 mix 功能，如果你想使用版本会更好

<script src="{{ mix('js/login.js') }}"></script>

参见编译资源（Laravel Mix）

https://laravel.com/docs/5.4/mix

mix.js(['resources/assets/js/app.js'], 'public/js')
        .sass('resources/assets/sass/app.scss', 'public/css')
        .styles([
            'node_modules/animate.css/animate.css',
            'node_modules/icheck/skins/flat/green.css',
            'node_modules/flatpickr/dist/flatpickr.css',
            'node_modules/gentelella/vendors/switchery/dist/switchery.min.css',
            'node_modules/ion-rangeslider/css/ion.rangeSlider.css',
            'node_modules/ion-rangeslider/css/ion.rangeSlider.skinFlat.css',
            'node_modules/gentelella/vendors/google-code-prettify/bin/prettify.min.css',
            //bootstrap modal carousel.js
            //'node_module/bootstrap-modal-carousel/dist/css/bootstrap-modal-carousel.css',
            'node_modules/gentelella/build/css/custom.css',
            'resources/assets/css/custom.css'
        ], 'public/css/custom.css')
        .copy('node_modules/gentelella/vendors/switchery/dist/switchery.min.js', 'public/js/switchery.min.js')
        .copy('node_modules/gentelella/vendors/switchery/dist/switchery.min.css', 'public/css/switchery.min.css')
        .copy('resources/assets/images', 'public/images')
        .copy('node_modules/ion-rangeslider/img', 'public/img')
        .copy('node_modules/icheck/skins/flat/green.png', 'public/css')
        .copy('node_modules/icheck/skins/flat/green@2x.png', 'public/css').version();

【讨论】：

好像你没有得到我的问题。
不，你可以把你需要的东西放在 webpack.mix.js 中然后编译它，我理解你，但我的意思是这样更好。查看更新的代码

【解决方案2】：

您可以在 config/filesystem.php 中创建一个指向该文件夹的新磁盘。

'package' => [
            'driver' => 'package',
            'root' => base_path('package'),
        ],

在刀片中

{{ Storage::disk('package')->url('vendor_name/package_name/src/assets/js/login.js') }}

视图的自定义目录

要编辑此内容，您必须进入 config/view.php 并为每个包添加路径 base_path('package/vendor_name/package_name/src/views')。

'paths' => [
        resource_path('views'),
        base_path('package/vendor_name/package_name/src/views'),
    ],

【讨论】：