如何在Laravel 8中正确引入Bootstrap 5的bootstrap.bundle.js文件

• 第一步：确认resources/js/app.js中已引入同目录的bootstrap.js文件，若缺失请补充如下代码：

import './bootstrap';

• 第二步：调整resources/js/bootstrap.js引入逻辑，Bootstrap 5的Tooltip、Popover组件默认不会自动初始化，需手动添加初始化代码，修改后代码如下：

try {
    window.Popper = require('@popperjs/core').default;
    // 将Bootstrap挂载到window对象，方便全局调用
    window.bootstrap = require('bootstrap');

    // 全局初始化所有Popover组件
    document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => {
        new bootstrap.Popover(el);
    });
    // 若需要使用Tooltip可同步添加如下初始化代码
    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
        new bootstrap.Tooltip(el);
    });
} catch (e) {}

• 第三步：重新执行编译命令，完成后清理浏览器缓存再测试功能：

npm run dev
# 生产环境编译请使用 npm run prod

补充注意事项 #

• Bootstrap 5所有交互组件的data属性前缀统一为data-bs-，不要使用旧版的data-前缀，例：触发Popover的属性应为data-bs-toggle="popover"，属性写错会直接导致功能失效。
• 若不需要完整引入Bootstrap所有JS组件，可按需引入对应组件减小打包体积，示例如下：

import { Popover } from 'bootstrap';
document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => new Popover(el));

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