在使用 Bootstrap 4 进行开发时，你可能会遇到这个错误：Uncaught ReferenceError: Popper is not defined。这个错误通常出现在使用 Bootstrap 4 的弹出框组件（Popover）和下拉菜单组件（Dropdown）时。
Popper.js 是什么？
首先，我们需要了解 Popper.js。Popper.js 是一个用于计算相对定位和绝对定位的 JavaScript 库。Bootstrap 4 使用 Popper.js 来管理其弹出框组件和下拉菜单组件的位置。因此，当你使用这些组件时，你需要加载 Popper.js。
解决方法
要解决这个错误，你需要确保已经正确加载了 Popper.js。有两种方法可以实现：
方法一：通过 CDN 加载
最简单的方式是通过 CDN 加载 Popper.js。在 HTML 文件的 <head> 标签中添加以下代码即可：
------- ------------------------------------------------------------------------------------
请注意，这段代码应该在 Bootstrap.js 之前加载。
方法二：手动下载并加载
如果你想在本地加载 Popper.js，你可以在官网上下载最新版本的 Popper.js。将下载的文件放在项目中的合适位置，并在 HTML 文件的 <head> 标签中添加以下代码：
------- --------------------------------------
请注意，这段代码应该在 Bootstrap.js 之前加载。
示例代码
以下是一个使用 Popover 组件的示例代码。你需要先按照上述方法之一加载 Popper.js，然后才能运行这个示例：
--------- -----
------
------
---------------- ------- ---------------
----- ----------------
----- --------------- ---------------------------- -----------------
----- ---------------- --------------------------------------------------------------------------------
------- ----------------------------------------------------------------
------- -----------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------
-------
------
---- ---------------- ------
------------- ------- ------------
-- -------- --------------------- -------------- ------ --------------------- -------------- ---- -- --- - -----------
------
--------
-----------------------------
---------------------------------------
---
---------
-------
-------结论
在使用 Bootstrap 4 的弹出框组件和下拉菜单组件时，确保已经正确加载了 Popper.js 是非常重要的。通过本文提供的解决方法，可以轻松避免 Uncaught ReferenceError: Popper is not defined 这个错误。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27684