【前端异常】解决前端引入Bootstrap的dropdowns 菜单时报错，Uncaught TypeError: Bootstrap‘s dropdowns require Popper.js

目录

1、问题描述

2、示例代码

3、解决方案

方案1：直接引用popper.js

方案2：npm安装

---

1、问题描述

在做网站时，引用了Bootstrap的下拉菜单，测试代码的时候遇到了下拉菜单无法显示的问题，我使用bootstrap的dropdown部

件，打开网页后点击dropdown，报了如下错误：Uncaught TypeError：Bootstrap dropdown require Popper.js

2、示例代码

前端代码如下：

<li class="nav-list-link" id="china-english">
	<div class="btn-group">
		<button class="btn btn-link btn-sm dropdown-toggle" type="button" 
			data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			<img src="/www/xgwy/images/navbar/chinese_flag.png" alt="中文图标">中文
			<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="/en/web/">
				<img src="/www/xgwy/images/navbar/english_flag.png" alt="英文图标">English
			</a>
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" href="/cn/web/">
				<img src="/www/xgwy/images/navbar/chinese_flag.png" alt="中文图标">中文
			</a>
		</div>
	</div>
</li>

3、解决方案

看错误提示，是要导入Popper.js文件，我总结了两种方法：（都需要注意引入顺序问题：popper.js必须在bootstrap.js之前引用进来）

方案1：直接引用popper.js

就是直接引用别人的popper.js库，如下：

<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>

方案2：npm安装

在直接工程目录下使用npm安装：npm install --save popper.js

安装好后，我们可以在目录下找到node_modules文件夹，然后将popper.js文件引入html()。

保存好刷新网页再试了一下，发现还是不行，仍报了刚才的错误。于是我检查了一下node_modules->dist文件夹下的popper.js文件，发现有3个这样的文件（esm和umd文件夹下也各有一个popper.js文件）。再于是我把它们分别引入后再操作一下dropdown部件，最后在引入umd文件下的popper.js后，终于是搞定。虽然不知道为啥会这样，但也算是成功解决了问题。

目前只发现在umd文件夹下的popper.js才可以用，至于为什么，还在后续深入学习中ing。

注：popper.js必须在bootstrap.js之前引用进来，否则也是报错的

 

 

完结！