Laravel中引入Bootstrap Bundle JS致下拉菜单失效，重复引用却正常？

问题根源：重复加载Bootstrap JS导致组件冲突 #

Laravel UI默认通过npm集成了Bootstrap（含完整JS组件），并通过Mix/Vite将其打包到app.js中，页面加载时已经初始化了下拉菜单等组件的事件监听。当你手动引入CDN的Bootstrap Bundle时，相当于在页面中加载了两次Bootstrap JS：

• 第一次是Laravel打包的版本，已完成组件初始化；
• 第二次CDN版本会覆盖全局bootstrap对象，同时重置之前绑定的DOM事件，导致下拉菜单失去交互能力。

为什么重复引入CDN能临时生效？ #

连续引入两次CDN的Bootstrap Bundle时，第二次加载的脚本会重新执行组件初始化逻辑，把第一次CDN引入时破坏的下拉菜单事件监听重新绑定回去。但这是治标不治本的冗余方案，会增加页面加载负担，还可能引发其他未知冲突。

正确解决方案（同时兼容Toast和下拉菜单） #

方案1：使用Laravel UI自带的Bootstrap（推荐） #

Laravel UI已经包含了Toast组件，无需额外引入CDN：

1. 确认resources/js/bootstrap.js中已导入Bootstrap：

   // resources/js/bootstrap.js
   import 'bootstrap';
   

2. 执行构建命令（根据Laravel版本选择）：
   • Laravel 8及以下（Mix）：npm run dev
   • Laravel 9+（Vite）：npm run build
3. 确保视图中加载了编译后的app.js（Laravel UI生成的模板默认已包含）：

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

此时bootstrap.Toast可正常调用，下拉菜单也能正常工作，因为全程只加载了一次Bootstrap JS。

方案2：统一使用CDN版本 #

若偏好CDN加载，需先移除本地Bootstrap依赖：

1. 卸载npm中的Bootstrap：

   npm uninstall bootstrap
   

2. 删除resources/js/bootstrap.js中导入Bootstrap的代码；
3. 在视图<head>中仅引入一次Bootstrap CSS和JS Bundle：

   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
   

4. 重新构建项目，确保无冗余Bootstrap代码被打包。

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