yii2如何加载Asset资源管理,为什么assets随机生成目录文件?

一般刚开始使用yii2的时候就会疑惑为什么项目有个\web\assets目录会有一些随机名称的子目录,而且一删除它还会时不时生成。

其实它就是yii2前端页面加载需要资源包,一般包括了静态的css、js、视频、图片、字体等。

一般资源包因为都是放在http无法访问的目录上,所以它才会根据组件和系统配置集中打包生成到\web\assets可访问目录下。

一切从main.php页面中使用use backend\assets\AppAsset;开始,

资源包指定为继承 yii\web\AssetBundle 的 PHP 类, 包名为可自动加载的 PHP 类名, 在资源包类中,要指定资源所在位置, 包含哪些 CSS 和 JavaScript 文件以及和其他包的依赖关系。

<?php

namespace app\assets;

use yii\web\AssetBundle;

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
        ['css/print.css', 'media' => 'print'],
    ];
    public $js = [
    ];
    public $depends = [//列出该资源包依赖的其他资源包
         'yii\web\YiiAsset',
 'yii\bootstrap\BootstrapAsset',
];
}

如上 AppAsset 类指定资源文件放在 @webroot 目录下,对应的 URL 为 @web,资源包中包含一个 CSS 文件 css/site.css,没有 JavaScript 文件, 依赖其他两个包 yii\web\YiiAsset 和 yii\bootstrap\BootstrapAsset。

\vendor\yiisoft\yii2\web\YiiAsset.php内容如下,YiiAsset又依赖了yii\web\JqueryAsset

class YiiAsset extends AssetBundle
{
    public $sourcePath = '@yii/assets';
    public $js = [
        'yii.js',
    ];
    public $depends = [
        'yii\web\JqueryAsset',
    ];
}

\vendor\yiisoft\yii2\web\JqueryAsset.php内容如下,可以看到最终加载了\vendor\bower-asset\jquery\dist目录下的jquery.js文件,并复制生成到了\web\assets目录下。

class JqueryAsset extends AssetBundle
{
    public $sourcePath = '@bower/jquery/dist';
    public $js = [
        'jquery.js',
    ];
}

这里顺便说点信息,一般\web\assets会有更新问题,可以使用配置linkAssets属性来让它使用快捷方式指定到资源目录位置,而不是复制多一份方式。不使用就记得更新了文件记得删除让它重新生成。

如果默认的jquery版本不合适,就使用覆盖’yii\web\JqueryAsset’方式调用不同版本的jquery。

    'components' => [
        'assetManager'=> [
            'linkAssets'=> true,//在项目/web/assets目录使用快捷方式指定到资源目录位置
            'bundles' => [
                //'yii\web\JqueryAsset' => false,//禁用
                'yii\web\JqueryAsset' => [
/*                    'js' => [
                        //YII_ENV_DEV ? 'jquery.js' : 'jquery.min.js',
                        '//lib.sinaapp.com/js/jquery/2.2.4/jquery-2.2.4.min.js'
                    ]*/
                ],
            ],

        ],
    ],

其它具体内容可以看看官方文档:https://www.yiichina.com/doc/guide/2.0/structure-assets

 

此条目发表在服务器分类目录,贴了标签。将固定链接加入收藏夹。

发表评论