一般刚开始使用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