Laravel Blade中Bootstrap 5下拉菜单失效问题求助

问题核心原因 #

Bootstrap 5的下拉菜单、工具提示等组件必须依赖Popper.js才能正常工作。你的初始代码只引入了bootstrap.min.js，没有包含Popper，这是下拉失效的根本原因。而同时引入两种Bootstrap JS方案能临时生效，只是因为重复加载补全了Popper依赖，但这种做法会导致脚本重复初始化、潜在冲突，绝对不推荐。

另外，Laravel的Vite构建工具可能会影响资源加载顺序，若Vite配置中已有Bootstrap/Popper的引入，会和CDN资源产生冲突，进一步加剧问题。

规范解决方案 #

方案1：仅使用Bootstrap Bundle（最快修复） #

Bootstrap提供的bootstrap.bundle.min.js已经内置了Popper.js，无需额外引入独立Popper脚本。修改步骤：

1. 删掉代码中以下部分：

   <!-- Option 2: Separate Popper and Bootstrap JS -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
   

2. 仅保留Bootstrap Bundle脚本：

   <!-- Bootstrap Bundle with Popper -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   

3. 确保脚本放在<body>底部、DOM元素之后加载，避免初始化时找不到下拉组件。

方案2：通过Laravel Vite管理Bootstrap（最佳实践） #

更符合Laravel项目的资源管理方式，避免CDN冲突：

1. 安装依赖到项目：

   npm install bootstrap@5.0.2 @popperjs/core@2.9.2
   

2. 修改resources/js/app.js，导入Bootstrap：

   // 导入Bootstrap CSS和JS
   import 'bootstrap/dist/css/bootstrap.min.css';
   import 'bootstrap';
   

3. 删掉Blade模板中所有Bootstrap的CDN CSS和JS引用，仅保留Vite指令：

   @vite(['resources/css/app.css', 'resources/js/app.js'])
   

4. 重新编译资源：

   npm run dev # 开发环境
   # 或
   npm run build # 生产环境
   

额外排查点 #

• 你的代码中引入了旧版本jQuery（1.7.1），Bootstrap 5不需要jQuery，若DataTables等工具依赖jQuery，建议升级到jQuery 3.x版本，并确保jQuery在Bootstrap脚本之前加载。
• 打开浏览器控制台（F12），检查是否有Popper is not defined之类的报错，这能快速定位依赖缺失问题。

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