Bootstrap-Popper-js获取失败解决方案


Bootstrap-Popper-js获取失败解决方案

      • boot基础引用
      • boot基础规则
      • boot基础引用方法
        • 网络资源引用
        • 本地资源引用
      • Bootstrap's dropdowns require Popper.js报错
        • 报错原因
        • 解决方案

boot基础引用

boot为我们提供了许多组件,这些组件简单易用，大方美观，其功能依赖于jquery.min.js,popper.min.js,bootstrap.min.js三大js文件，正确的引用是组件正常运行的基础。

boot基础规则

首先要注意的引用规则是jquery.min.js,popper.min.js,bootstrap.min.js依次引用,引用顺序的不同可能导致组件使用异常。

boot基础引用方法

引用方式有两种，一是引用网络资源，二是将相关文件从官网或者使用npm等包管理工具下载,下载后存放在项目下对应的文件夹中，引用本地文件。

网络资源引用

1
2
3
4
5
6
7
8
9
10
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//i2.wp.com/cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
 
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="//i2.wp.com/cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
 
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="//i2.wp.com/cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

本地资源引用

1
2
3
4
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="./js/jquery.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>

Bootstrap’s dropdowns require Popper.js报错

而在引用本地资源时我们有时会遇到下拉框无法正常显示等问题,网页报错为Bootstrap’s dropdowns require Popper.js即popper.js错误。

报错原因

这种问题往往是由于我们在复制文件到项目文件中时，复制错误导致的，值得注意的是，在下载的popper包中,存在两个popper.min.js文件，分别位于esm和umd中，从上文的网络资源连接中看出，我们需要的是umd下的js文件，如果错误复制了esm中的文件到项目中，就会报错。

解决方案

解决这个问题的方法有两种

  • 使用上文中的网络连接
  • 复制umd目录下的popper.min.js到引用目录中，覆盖之前的错误文件