Laravel中JQuery仅在app.js生效，全局调用报错求助

问题分析 #

你遇到的$ is not defined报错，核心原因是脚本执行时机不匹配：Laravel Mix 默认会给生成的app.js添加defer属性，这意味着app.js会延迟到DOM加载完成后才执行；而你通过@push添加的脚本没有defer，会立即执行——此时app.js里的window.$ = $还没运行，自然找不到$。另外布局中@livewireScripts的加载顺序也加剧了这个问题。

解决方案 #

以下是几种可行的解决方式，按需选择：

方案1：调整加载顺序并禁用defer

修改Blade布局，把app.js放到@livewireScripts前面，确保jQuery先被挂载到全局：

<script src="{{ mix('js/app.js') }}"></script>
@livewireScripts
@stack('scripts')

然后修改webpack.mix.js，禁用默认的defer属性：

mix.js('resources/js/app.js', 'public/js')
   .options({
       scriptAttributes: {
           defer: false
       }
   });

方案2：给自定义脚本添加defer

保持现有布局不变，给@push里的脚本加上defer，让它和app.js同步延迟执行：

@push('scripts')
    <script defer>
        $(function () {
            alert("Hello");
        });
    </script>
@endpush

方案3：用Webpack全局注入jQuery

在webpack.mix.js中配置ProvidePlugin，自动给所有模块注入jQuery，无需手动挂载到window：

const mix = require('laravel-mix');
const webpack = require('webpack');

mix.js('resources/js/app.js', 'public/js')
   .webpackConfig({
       plugins: [
           new webpack.ProvidePlugin({
               $: 'jquery',
               jQuery: 'jquery',
               'window.jQuery': 'jquery'
           })
       ]
   });

之后可以删掉app.js里的window.$ = $;，jQuery会自动成为全局变量。

方案4：如果用Livewire 3，改用@script标签

Livewire 3推荐用@script标签管理组件内脚本，它会自动处理执行时机，确保依赖加载完成：

@script
<script>
    $(function () {
        alert("Hello");
    });
</script>
@endscript

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