即使在包含 popper.js 之后仍然出现“未捕获的错误：引导下拉菜单需要 Popper.js”
Posted
技术标签:
【中文标题】即使在包含 popper.js 之后仍然出现“未捕获的错误：引导下拉菜单需要 Popper.js”【英文标题】：Still getting "Uncaught Error: Bootstrap dropdown require Popper.js" even after including popper.js 【发布时间】：2018-01-26 08:07:55 【问题描述】：Angular 和 Bootstrap 的新手，我正在尝试创建 helloworld 应用程序。我已经添加了所需的库，但我遇到了这个错误
未捕获的错误：引导下拉菜单需要 Popper.js
我在 jquery 之后和 bootstrap js 之前添加了 popper.js 脚本。但浏览器仍然会抛出错误。
请帮忙。
代码如下：
<!DOCTYPE html>
<html ng-app="helloWorld" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Index</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="mainCtrl">message
<script src="js/angular.min.js" type="text/javascript"></script>
<script src="js/jquery-3.2.1.slim.min.js" type="text/javascript"></script>
<script src="js/popper.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="app/app.js" type="text/javascript"></script>
</body>
</html>
【问题讨论】：
您使用的是什么版本的 popper.js？在这种情况下你需要 UMD 一个 压缩了一个popper.min.js 我下载的版本是v1.12.2。哪个是 UMD？ 您是否尝试过更改 bootstrap.js 和 poper.js 脚本的位置？ 我在 bootstrap 之后有 popper.js，但它不起作用，无论如何我知道它必须在 bootstrap 之后 【参考方案1】：这对我有用：
-
使用 popper.js，它位于您在此处找到的下载中名为“umd”的文件夹中 https://popper.js.org
不要将文件保存在与 bootstrap.js 相同的文件夹中，而是创建一个名为“umd”的单独文件夹
在 bootstrap.js 之前声明 popper.js
所以，在你的情况下，改变
<script src="js/popper.min.js" type="text/javascript"></script>
到
<script src="js/umd/popper.min.js" type="text/javascript"></script>
【讨论】：
不需要popper-utils 这对我有用。我已将 BundleConfigu 中的路线更改为使用“umd”【参考方案2】：Indra4ev3r 的答案在 VS2015 Update 3 上为我工作，用于 MVC5 项目。例如，在引导之前切换 popper。
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/umd/popper.js",
"~/Scripts/bootstrap.js"));
【讨论】：
【参考方案3】：遇到了同样的问题并解决了。希望对您有所帮助！
如果您在项目中使用 Bootstrap.js，那么它需要 jquery 和 popper.js 才能在 bootstrap 之前运行。 以下步骤可能会解决问题：
cd 到项目的文件夹或 cd 到项目的引导文件夹。 执行：
npm install popper.js --save
转到http://getbootstrap.com/docs/4.0/getting-started/download/ 复制 Bootstrap CDN 部分下的脚本和链接内容 - 如果您使用的是我们编译的 JavaScript，请不要忘记在其之前包含 jQuery 和 Popper.js 的 CDN 版本。
您的 index.html 文件可能必须如下所示：（基于 jquery 和 popper.js 的版本） 您基本上是按以下顺序查找 3 个 script src = "" 标签 jquery > popper.js > bootstrap.js 注意：编辑器不允许我添加脚本标签。请添加它们。
src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous">
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous">
【讨论】：
正如你所说，序列是有意义的【参考方案4】：我在 VisualStudio 2017 中也遇到了这个错误。
当我在这一行中删除“min”时
<script src="Scripts/popper.min.js"></script>
作为
<script src="Scripts/popper.js"></script>
DropDownMenu 功能起作用了！
【讨论】：
以上是关于即使在包含 popper.js 之后仍然出现“未捕获的错误：引导下拉菜单需要 Popper.js”的主要内容，如果未能解决你的问题，请参考以下文章
前端编程：bootstrap4 中 bootstrap.bundle.min.js 既然已经包含了Popper，那为啥大家不用它？
bootstrap4popper.js报错Uncaught ReferenceError
bootstrap 4.0 dropdown 找不到popper.js 的解决方案
bootstrap 4 中的 popper.js 给出了 SyntaxError Unexpected token export