前端 Bootstrap's dropdowns require Popper.js 异常

报错情景:

自己写了个简单的Springboot+mybatis小demo,前端用的是thymeleaf标签,UI用的是bootstrap框架(4.3.1)

然后,写个简单的dropdown按钮都无法实现,还是从官网搬来的


    

头部文件如下:



    
    
    
    
    

检查一下,bootstrap导入路径没啥不对,但页面没效果,点了没反应,根本弹不出菜单:

前端 Bootstrap's dropdowns require Popper.js 异常_第1张图片

于是看控制台:

前端 Bootstrap's dropdowns require Popper.js 异常_第2张图片

这句报错,初步判断就是确实了popper.js包,于是我点进去看了看bootstrap的javascript代码,确实需要导入popper.js:

前端 Bootstrap's dropdowns require Popper.js 异常_第3张图片

于是,我从官网例子中直接打开popper.js的引用URL,复制整段js代码,然后在自己工程里新建一个popper.js,并引用进来

但,依旧是报Bootstrap's dropdowns require Popper.js这个异常,百思不得其解

于是登录popper.js官网,可找不到下载点,苦恼中,百度

百度上有两种方法,比较简单的,就是直接引用别人的popper.js库,如下:

但我向来不喜欢自己的工程里出现这种要联网的资源,很不靠谱,该方法放弃

 

然后,我找到了这篇博客:

解决 Bootstrap dropdown require Popper.js的问题

根据博主的方法一步一步走下去,发觉npm安装顺利,文件也有了,也引入了,可我引入的路径似乎有毛病:

前端 Bootstrap's dropdowns require Popper.js 异常_第4张图片

跑起来,浏览一下,也报错,404:

前端 Bootstrap's dropdowns require Popper.js 异常_第5张图片

点一下,还是这个错:

前端 Bootstrap's dropdowns require Popper.js 异常_第6张图片

这个路径不行,非src,访问不到,于是只好把npm生成的文件拖进static/lib/路径下,并修改引用:

前端 Bootstrap's dropdowns require Popper.js 异常_第7张图片

再跑起来,刷新,点击,解决:

前端 Bootstrap's dropdowns require Popper.js 异常_第8张图片

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

 

你可能感兴趣的:(异常处理,前端代码)