Laravel Mix迁移后内联JS报jQuery未定义错误求助

我之前从Gulp转Laravel Mix时也踩过这个一模一样的坑！SASS编译正常，但内联JS一调用jQuery就报「Uncaught ReferenceError: jQuery is not defined」，折腾了好半天，给你几个亲测有效的解决思路：

1. 用Mix的autoload自动全局挂载jQuery #

Laravel Mix专门提供了autoload方法，让Webpack自动把jQuery注入到所有模块，同时挂载到window对象上，这样内联JS就能直接访问了。修改你的webpack.mix.js：

let mix = require('laravel-mix');

// 关键：自动加载并全局暴露jQuery
mix.autoload({
    jquery: ['$', 'window.jQuery', 'jQuery']
})
.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');

配置完重新运行npm run dev或者npm run prod，这个方法一般能解决90%的情况。

2. 手动在app.js里挂载jQuery到全局 #

如果上面的方法没生效，你可以直接在resources/js/app.js里手动导入jQuery并挂载到window：

// 顶部导入jQuery
import $ from 'jquery';
// 挂载到window，让全局都能访问
window.$ = window.jQuery = $;

**重点注意：一定要确保你的内联JS写在编译后的app.js引入之后！**很多人栽在这一步——比如Blade模板里要这样写：

<!-- 先加载编译后的JS文件 -->
<script src="{{ mix('js/app.js') }}"></script>
<!-- 再写内联JS代码 -->
<script>
    $(document).ready(function() {
        // 你的内联JS逻辑
    });
</script>

如果内联JS放在app.js前面，代码执行时jQuery还没加载，肯定会报错。

3. 分离第三方库时注意加载顺序 #

如果你用了mix.extract()把jQuery这类第三方库抽离到单独的vendor.js文件，那要确保模板里先加载vendor.js，再加载app.js：

// webpack.mix.js里的配置
mix.extract(['jquery'])
.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');

对应的Blade模板：

<script src="{{ mix('js/vendor.js') }}"></script>
<script src="{{ mix('js/app.js') }}"></script>
<script>
    // 内联JS代码
</script>

排查小技巧 #

• 打开浏览器控制台，查看window对象里有没有jQuery或$——如果没有，说明挂载没成功；如果有，那可能是内联JS执行时机的问题（比如DOM还没加载完？不过一般报错是找不到变量，不是找不到元素）。
• 检查有没有在webpack.mix.js里开启了mix.babelConfig()之类的配置，会不会影响全局变量的挂载？

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