如何使用laravel-mix为Laravel 8项目安装Bootstrap、jQuery及popper.js并解决$未定义问题

问题根因 #

通过laravel/ui安装的Bootstrap依赖的jQuery默认被打包在模块化的app.js中，没有挂载到全局window对象，无法直接在页面内联脚本中调用，就会出现Uncaught ReferenceError: $ is not defined报错。

修复步骤 #

方案一：修改打包配置暴露全局jQuery（推荐，无冗余引入） #

1. 打开项目目录下的resources/js/bootstrap.js文件，补充或取消注释以下代码：

import $ from 'jquery';
window.$ = window.jQuery = $;
// 原有引入bootstrap的代码保留即可，无需修改
import 'bootstrap';

2. 重新编译前端资源：

npm run dev
# 生产环境部署执行 npm run build

3. 确认页面脚本执行顺序：

• 如果你引入app.js的标签带defer属性，内联jQuery代码会先于app.js执行，要么去掉defer属性，要么将内联代码也写到resources/js/app.js中统一打包。
• 内联jQuery代码要放在app.js引入标签的后面，避免执行时app.js还未加载完成。

方案二：单独引入jQuery文件（快速适配，无需修改打包逻辑） #

如果不想改动现有打包配置，可以自行下载和Bootstrap版本匹配的jQuery文件，放到项目public/js目录下，在app.js引入之前引入jQuery即可：

<script src="{{ asset('js/jquery.min.js') }}"></script>

验证 #

修改完成后刷新页面，你的测试代码即可正常弹出提示。

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