Bootstrap bootstrap.bundle.js 不适用于 Laravel 项目上的按钮下拉菜单

问题描述

在一个新的 Laravel 项目中，我已经包含了 Bootstrap 5 'npm install bootstrap' 并导入到 /resrouces/sass/app.scss @import "~bootstrap/scss/bootstrap"; - 很好，它有效。

现在我有一个无法工作的下拉组件，我不知道为什么。

    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="user_select" data-bs-toggle="dropdown" aria-expanded="false">
            Select...
        </button>
        <ul class="dropdown-menu" aria-labelledby="user_select">
            <li><a class="dropdown-item" href="user/1">user 1</a></li>
            <li><a class="dropdown-item" href="user/2">user 2</a></li>
        </ul>
    </div>

非常简单的按钮...

当我点击按钮时，没有任何反应。没有控制台错误或任何错误。

Bootstrap 官方文档说明 Plugins can be included individually (using Bootstrap’s individual js/dist/*.js),or all at once using bootstrap.js or the minified bootstrap.min.js (don’t include both).

import Bootstrap from 'bootstrap/dist/js/bootstrap.bundle.js';

require('Bootstrap');

npm run dev >> ERROR in ./node_modules/Bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'popper.js' in '/Users/Developer/code/project/node_modules/Bootstrap/dist/js'
 @ ./node_modules/Bootstrap/dist/js/bootstrap.js 7:101-121

尝试添加波普尔。

window.Popper = require('@popperjs/core/dist/umd/popper').default;

import Bootstrap from 'bootstrap/dist/js/bootstrap.bundle.js';

require('Bootstrap');

npm run dev >> ERROR in ./node_modules/Bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'popper.js' in '/Users/Developer/code/project/node_modules/Bootstrap/dist/js'
 @ ./node_modules/Bootstrap/dist/js/bootstrap.js 7:101-121

如果我这样做，它会成功编译，但下拉菜单仍然不起作用。我确保清除缓存，甚至每次都在隐身窗口中尝试过。

window.Popper = require('@popperjs/core/dist/umd/popper').default;

require('bootstrap/dist/js/bootstrap.bundle.js');

我错过了什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）