解决Error:Bootstrap dropdown require Popper.js (https://popper.js.org)

popper.js(bootstrap里面扩展功能要用到的插件) bootstrap里面要用到的插件,同时也是支持bootstrap的扩展功能必要的 立即下载
这个Error是没有在webpack中配置bootstrap的依赖popper.js导致的。bootstrap除了依赖jQuery还是部分插件依赖popper.js.

以下是我对这个问题的实践过程:
# 首先简单说一下vue引入bootstrap的过程:
1.创建一个vue项目(使用vue-cli)
····bash(如果已经安装则忽略)
npm i -g vue-cli 

# 初始化项目
····bash
vue init webpack my-app

# dev 启动项目
····bash
npm run dev

# build生产环境
···base
npm run build

# 因为bootstrap.js是依赖JQuery的,所以要在webpack.base.conf.js中加载juery插件,
...bash
npm install --save jquery

# 在webpack.base.conf.js中增加声明webpack
var webpack=require('webpack')

# 在module.exports = {}中添加一下代码
plugins: [
   new webpack.optimize.CommonsChunkPlugin('common'),
   new webpack.ProvidePlugin({
     jQuery: 'jquery',
     $: 'jquery',
   })

# 把bootstrap库的js和css放到assets文件夹下,在webpack.base.conf.js的module.exports = {}中的resolve中增加
'bootstrap':resolve('src/assets/bootstrap'),
代码如下:
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'bootstrap':resolve('src/assets/bootstrap'),
    },
    symlinks: false
  },

#在main.js中把bootstrap的js和css通过import引进来
代码如下:
import 'bootstrap/js/bootstrap.js'
import 'bootstrap/css/bootstrap.css'

#执行npm run dev 发现控制台提示以下Error:


# 原因:
Bootstrap 的dropdown插件是依赖popper.js

# 解决:
...bash
npm install --save popper.js

# 在module.exports = {}中添加一下代码
plugins: [
   new webpack.optimize.CommonsChunkPlugin('common'),
   new webpack.ProvidePlugin({
     jQuery: 'jquery',
     $: 'jquery',
    Popper: ['popper.js', 'default'],
   })

# Done!

完整的webpack.base.conf.js

main.js的源码:








bootstrap-dropdown.js bootstrap-dropdown.jsbootstrap-dropdown.jsbootstrap-dropdown.jsbootstrap-dropdown.js 立即下载

相关推荐

解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题

主要介绍了使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js ,小编把问题描述和解决方案分享给大家,需要的朋友可以参考下

Bootstrap‘s dropdowns require Popper (https://popper.js.org)

Bootstrap's dropdowns require Popper (https://popper.js.org)

qq_28293411的博客 589

车道线检测(传统基于Opencv的方法)

传统车道线检测方法主要是使用颜色选择、高斯平滑、边缘检测、ROI区域选择、霍夫变换、标定车道边界等Opnecv图像处理操作去检测道路上的车道线,我自己对很多用这类处理对很多道路场景车道线进行过实验,这类算法往往需要人工根据不同街道场景手动去反复调整各算法参数,从而才能使检测效果最佳。

Yangxiaoaijiejie的博客 2073

Uncaught TypeError: Bootstrap dropdown require Popper.js (https://popper.js.org)(下拉菜单)

Uncaught TypeError: Bootstrap dropdown require Popper.js (https://popper.js.org)(下拉菜单)

记录和分享属于我的“IT”时光。 928

用python自动复制粘贴excel表里某一列的数据到另一个表中

昨天接到人事小姐姐求助减轻复制粘贴的重复工作量,分享一下代码 半路新手上路 耶 把 2.xlsx 表里的第二列 的数据复制粘贴到 test.xlsx的第一列 python3.6.2 from openpyxl import Workbook from openpyxl import load_workbook from openpyxl.writer.excel import Exc...

weixin_33854644的博客 2万+

Apache Hop集成Spring Boot实战:从配置到执行HPL文件

本文详细介绍了将Apache Hop集成到Spring Boot应用中的完整实战方案。通过配置核心依赖、初始化Hop环境、编写服务层逻辑,实现了在Java应用中程序化执行HPL管道文件,从而将可视化ETL能力无缝嵌入微服务架构,提升数据处理的自动化与可维护性。

blue42的博客 476

Bootstrap报错Bootstrap‘s dropdowns require Popper.js

参考:解决Bootstrap’s dropdowns require Popper.js 解决方案 可以使用script标签直接引用网上的popper.js文件,网址如下 https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.js 或者将该网址内的popper.js文件下载到本地项目内,再引用。 注意:popper.js文件的引用要在bootstrap.js之前 ...

ahy231的博客 922

信号完整性入门:为什么工程师总爱用dB来描述衰减?

本文深入探讨了信号完整性分析中工程师偏爱使用dB(分贝)单位描述衰减的原因。dB通过对数转换,将大动态范围的乘除关系简化为加减运算,极大地方便了多级系统分析和链路预算计算。文章重点解释了-3dB点的核心意义,即功率衰减一半的临界状态,并阐述了其在评估信道带宽、插入损耗与回波损耗等关键参数中的实际应用,是高效工程思维和沟通的重要工具。

weixin_29263201的博客 385

Bootstrap's dropdowns require Popper.js

当我使用bootstrap4 用它的按钮组下拉菜单的时候 给我报了这样的错误 说我们需要一个popper.js文件 俩种解决方法 第一种:<script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.js"></script> //网络资源 第二种:下载到本地 1.在当前文件夹 下 初始化项...

业余前端的职业经历 1765

解决ublox无法定位问题(一直输出$GxTXT)

最近开始研究有关RTK技术的项目,于是先购买了两块ublox公司的NEO-M8T-0型号芯片。(注意NEO-M8T还细分为NEO-M8T-0和NEO-M8T-2,前者不支持RTCM输出,后者支持RTCM输出) 首先都是按常规步骤,直接把芯片模块串口接电脑调试,这边推荐是用官网的u-center调试软件。GPS芯片大多数都是上电后串口自动发送定位等信息,这两块芯片有一块正常情...

众缈之门的博客 7359

嵌入式充电协议深度解析:从QC到PD3.1的技术演进与实战应用

本文深入解析了从QC到PD3.1的嵌入式充电协议技术演进与实战应用。通过电压谈判、协议芯片设计、Type-C接口优化等关键技术,详细介绍了快充协议在嵌入式系统中的实现挑战与解决方案,包括兼容性测试、EMC问题处理及空间限制创新设计,为开发者提供了宝贵的实践经验。

weixin_29194817的博客 420

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

报错情景: 自己写了个简单的Springboot+mybatis小demo,前端用的是thymeleaf标签,UI用的是bootstrap框架(4.3.1) 然后,写个简单的dropdown按钮都无法实现,还是从官网搬来的 <div class="container"> <div class="dropdown"> ...

走一步算一步的博客 1万+

人工智能混合编程实践:C++调用封装好的DLL进行异常检测推理

C++、Python、ONNX、人工智能、异常检测、Anomalib 2.1.0

FriendshipTang的博客 170

Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org)

html网页错误显示 bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org) at bootstrap.min.js:6 at bootstrap.min.js:6 at bootstrap.min.js:6 我的错误是:缺少这个属性rel=...

b850824的博客 2105

Vue3 - [兼容PC和手机H5] 详细监听浏览器刷新 / 关闭 / 前进后退事件,用户点击关闭和刷新页面前 “拦截“ 操作并弹出提示框(实时监听用户关闭或刷新网页,触发时文字提醒并执行自定义操作)

vue3监听页面关闭和刷新,vue3中如何监听页面刷新和关闭事件,vue3中监听浏览器窗口关闭事件,并在窗口关闭进行操作,vue3怎么只在某个页面监听,其他页面不监听,vue3监听刷新和关闭怎么离开页面时注销释放,vue3怎么阻止浏览器前进和后退并提示,页面跳转离开后依旧可以监听到刷新和关闭,vue3怎么知道用户关闭了网页,vue3如何监听刷新网页操作并截断,vue3移动端手机h5网页手机网站监听浏览器刷新关闭,vue3当页面关闭或刷新时怎么提示用户离开不保存数据,vue3项目监听浏览器窗口或标签页关闭,并

🏆 前端领域优质创作者 1万+

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

【前端异常】解决前端引入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 r...

No8g攻城狮的博客 4754

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

使用bootstrap的dropdown部件时报错:Bootstrap dropdown require Popper.js

在学习bootstrap的dropdown时遇到了这样一个问题 读了读,发现是没有安装popper.js的原因 首先安装popper.js,安装方法见这个链接,注意安装环境为自己的项目目录 下载成功之后是这样的一个目录 这里我们使用的是umd文件夹下的popper.js文件,使用相对路径导入到HTML中即可 注意:将popper.js文件导入放到bootstrap之前才能生效 ...

yeweij226的博客 802

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

bootstrapselect使用 Bootstrap's dropdowns require Popper.js

虽然我目前喜欢用vue,但是有一些项目会用bootstrap进行配合。 下面介绍一款bootstrap生态链的插件:bootstrapselect。 官网地址:https://www.bootstrapselect.cn/ 特别要注意一点,引入bootstrapselect前要先引入popper.js。 由于bootstrap本身代码也有依赖popper.js的地方。所以popper.js位置需要...

solocao的专栏 910

【免费下载】 Bootstrap下拉菜单需要Popper.js(popper.js下载)

Bootstrap下拉菜单需要Popper.js(popper.js下载) 【下载地址】Bootstrap下拉菜单需要Popper.jspopper.js下载 本仓库提供了一个资源文件的下载,该资源文件是用于解决Bootstrap下拉菜单(dropdown)功能所需的Popper.js库。Popper.js是一个轻量级的...

gitblog_06570的博客 1295

【亲测免费】 解决Bootstrap下拉菜单问题的利器:Popper.js

解决Bootstrap下拉菜单问题的利器:Popper.js 【下载地址】Bootstrap下拉菜单需要Popper.jspopper.js下载 本仓库提供了一个资源文件的下载,该资源文件是用于解决Bootstrap下拉菜单(dropdown)功能所需的Popper.js库。Popper.js是一个轻量级的JavaScr...

gitblog_06559的博客 1453

解决 Bootstrap dropdown require Popper.js的问题

今天在慕课网看Bootstrap中的下拉菜单,测试代码的时候遇到了JS实现的下拉菜单无法显示的问题,代码如下 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>下拉菜...

weixin_30847865的博客 379

Uncaught Error: Bootstrap dropdown require Popper.js

Bootstrap 要求Popper.js 如果安装了Popper.js还报错,肯定就是Popper的问题 https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js 请粘贴上面的js代码到Popper.min.js里面去 /* Copyright (C) Federico Zivolo 2017 Distri...

didong6252的博客 540

解决Bootstrap's dropdowns require Popper.js

使用bootstrap-table时,用到dropdown,提示Bootstrap's dropdowns require Popper.js 很明显,需要引入popper.js, but,经过测试,使用如下两个均不可以解决问题: https://cdn.bootcss.com/popper.js/1.15.0/popper.js https://cdn.bootcss...

actv87448的博客 1246

Bootstrap dropdown require Popper.js(popper.js下载)

得引用popper.js文件 <script src="/Scripts/jquery/jquery.min.js" type="text/javascript"></script> <script src="/Scripts/proper/popper.js" type="text/javascript"></script> &l...

图纸的博客 7650

使用Bootstrap4写项目遇到的问题总结

关于工具提示框组件的使用 1.页面引入需要的html代码后,需在js文件添加初始化工具提示的代码 $('[data-toggle="tooltip"]').tooltip(); 2.出现该错误 Uncaught TypeError: Bootstrap’s tooltips require Popper.js,如图: 解决方法:需要引入popper.js文件 在cmd(命令提示符)中输入np...

weixin_42684860的博客 1814

AI时代软件工程师的四层能力跃迁:从编码者到AI协作者

软件工程师正经历一场由AI驱动的职业范式迁移——从关注‘如何实现功能’转向‘如何定义并校验值得实现的问题’。这一转变根植于工程思维的本质:契约精神、防御性设计与闭环验证。当大模型成为可调度的组件,Prompt工程即代码审查,LLM输出需纳入CI质量门禁,系统架构必须为AI设定SLA与降级路径,而职业发展本身也需以产品思维持续迭代。本文聚焦AI增强(AI-Augmented)而非AI替代(AI-Replace)的实践主线,结合17个真实项目沉淀的Layer 1–4跃迁模型,详解如何将AI深度融入日常交付链路,

weixin_30384217的博客 919
上一篇: Writing for GCD: 如何将github repository 部署到GitHub pages
freedom1993
博客等级 码龄12年 25粉丝 57原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值