Laravel 5.6带make:auth脚手架项目中$未定义，无法使用jQuery

我之前在Laravel 5.6项目里也踩过这个坑——明明用了默认脚手架，app.js里应该包含jQuery，结果控制台死活报$ is not defined，给你几个亲测有效的解决办法：

1. 移除script标签的defer属性 #

你代码里的<script src="/js/app.js" defer>加了defer属性，这会让app.js等到DOM完全加载后才执行。但如果你的自定义jQuery代码是直接写在页面的<script>标签里，会比app.js先运行，自然找不到$。

直接把defer删掉就行：

<script src="/js/app.js"></script>

2. 手动将jQuery暴露到全局（推荐方案） #

Laravel Mix默认会把jQuery作为模块打包，不会自动挂载到window对象上，所以全局环境拿不到$。你可以在resources/assets/js/bootstrap.js里添加一行代码，强制把jQuery暴露到全局：

打开bootstrap.js，找到并确保有这两行：

window._ = require('lodash');
window.$ = window.jQuery = require('jquery');

如果原来没有第二行，就补上它！然后重新编译前端资源：

npm run dev

生产环境记得用npm run prod

3. 让自定义代码等jQuery加载完成后再执行 #

如果你不想改动defer属性，那就要保证你的jQuery代码在app.js加载完成后再运行。可以把代码放到$(document).ready()里，或者用window.load事件监听：

<script>
window.addEventListener('load', function() {
    // 这里写你的jQuery逻辑，比如
    $('#login-form').submit(function(e) {
        // 处理表单提交
    });
});
</script>

4. 检查Mix配置与依赖安装（兜底排查） #

有时候可能是依赖没装全或者Mix配置出问题：

• 确认你已经执行过npm install安装所有前端依赖
• 打开webpack.mix.js，确保有基础的打包配置：

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

试完上面的方法，应该就能解决你的问题了！

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