Yii2出现Uncaught ReferenceError: $ is not defined错误求助

这个报错的核心原因很明确：你的jQuery初始化代码先于jQuery库本身加载了，浏览器找不到$这个jQuery的别名，自然就抛出了错误。咱们一步步来解决：

为什么会出现这个问题？ #

Yii2的JqueryAsset默认配置是把jQuery文件放在**页面底部（POS_END）**加载的——这是前端性能优化的常规操作，避免JS阻塞DOM渲染。但你直接在视图的HTML中间写了原生<script>标签，这段脚本会在页面解析到它的时候立即执行，而此时jQuery还没被加载，就会出现$ is not defined的报错。

推荐的解决方案 #

方案1：把自定义脚本加入资源类（最符合Yii规范） #

Yii的资源管理系统会自动处理依赖和加载顺序，把初始化代码放到单独的JS文件里，再通过AppAsset注册是最规范的做法：

1. 在@webroot/js目录下新建datetimepicker-init.js文件，内容如下：

$(function () {
    $('#datetimepicker1').datetimepicker();
});

2. 修改你的AppAsset类，把这个JS文件加入$js数组：

class AppAsset extends AssetBundle {
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
    ];
    public $js = [
        'js/datetimepicker-init.js', // 新增这一行
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
        'yii\web\JqueryAsset'
    ];
}

这样Yii会自动确保jQuery先加载，再执行你的初始化脚本，加载顺序完全没问题。

方案2：在视图中注册脚本时指定加载位置 #

如果你想直接在test.php里写脚本，别用原生<script>标签，改用Yii提供的registerJs方法，并指定脚本在页面底部执行：

<?php
// 替换你原来的<script>标签，用这段代码
$this->registerJs("
    $(function () {
        $('#datetimepicker1').datetimepicker();
    });
", \yii\web\View::POS_END);
?>

POS_END会让这段脚本被放到页面底部，在jQuery之后执行，完美避开加载顺序问题。

方案3：修改jQuery的加载位置（不推荐） #

如果你一定要让jQuery在页面头部加载，可以修改配置文件，但这会阻塞页面渲染、影响加载性能，不建议这么做：

在config/web.php的components数组中添加：

'assetManager' => [
    'bundles' => [
        'yii\web\JqueryAsset' => [
            'jsOptions' => ['position' => \yii\web\View::POS_HEAD],
        ],
    ],
],

总结 #

优先选择方案1或方案2，既符合Yii2的资源管理规范，又能保证页面加载性能。

内容的提问来源于stack exchange，提问作者user7189675