无法让 Bootstrap+Popper 下拉菜单在 Laravel+Vite 中工作

Question

我是一位经验丰富的开发人员（20 多年），但最近才开始使用 Laravel。我很少会被卡住，但是这个问题我无法解决。

我全新安装了最新版本的 Laravel。 Bootstrap 应该是开箱即用的，但我在使用它时遇到了很多困难。起初引导程序无法识别 jQuery，因此“modal()”无法正常工作，但我在某处发现了一些黑客代码，使其正常运行。但现在我无法让下拉列表工作（单击下拉列表时根本没有任何反应，也没有错误），我认为这与 Popper 相关。

这是我的 bootstrap.js 文件：

import $ from 'jquery';
window.$ = window.jQuery = $;

import * as Popper from '@popperjs/core';
window.Popper = Popper;

import * as bootstrap from 'bootstrap';

function defineJQueryPlugin(plugin) {
  const name = plugin.NAME;
  const JQUERY_NO_CONFLICT = $.fn[name];
  $.fn[name] = plugin.jQueryInterface;
  $.fn[name].Constructor = plugin;
  $.fn[name].noConflict = () => {
    $.fn[name] = JQUERY_NO_CONFLICT;
    return plugin.jQueryInterface;
  }
}

defineJQueryPlugin(bootstrap.Modal);
defineJQueryPlugin(bootstrap.Tooltip);
defineJQueryPlugin(bootstrap.Popover);

import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

添加了“defineJQueryPlugin”函数来让引导程序识别 jQuery，以便“modal()”函数可以工作。对我来说，如果没有这个 hack，bootstrap 就无法识别 jQuery，这似乎很奇怪，而且似乎很少有人遇到这个问题。

我正在运行“npm run build”，它可以很好地构建 js 文件，并且引导程序的其余部分正在工作。但我不明白为什么下拉菜单根本不起作用，就像没有添加按钮的事件处理程序一样。

下拉菜单本身的 HTML 是直接从 Bootstrap 文档复制的，所以我预计它不会出现任何问题：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

这是 Laravel 的全新安装，除了添加一些图标库之外没有任何自定义。我只是构建一个单页网站（没有 api 或登录），所以没有什么特别的。

我在互联网上查找了所有相关的帖子并尝试了所有这些（大多数只是建议“导入”语句的不同位置），但仍然没有运气。所有库都是最新的。

如有任何帮助，我们将不胜感激！谢谢你:)

Answer 1

您似乎还没有为 jQuery 定义 Dropdown 插件。您可以将 Dropdown 插件添加到您的

defineJQueryPlugin

函数中，就像为 Modal、Tooltip 和 Popover 所做的那样。

defineJQueryPlugin(bootstrap.Dropdown);