解决Error:Bootstrap dropdown require Popper.js (https://popper.js.org)
来源:互联网 发布:怎么通过网络挣钱 编辑:程序博客网 时间:2024/06/05 21:01
官方文档:https://getbootstrap.com/docs/4.0/getting-started/webpack/
这个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!
附件:https://github.com/freedom93/freedom/commit/d6b0399ca95f6880f207dc347c4bff44164b9e6b
完整的webpack.base.conf.js
main.js的源码:
阅读全文
1 0
- 解决Error:Bootstrap dropdown require Popper.js (https://popper.js.org)
- bootstrap学习31---dropdown.js
- Bootstrap.js 重复加载导致dropdown-toggle出现问题
- require.js
- require.js
- require.js
- require.js
- Require.js
- require.js
- Require.js
- require.js
- [require.js]初识require.js
- JS-require.js
- JS-require.js
- 基于require.js+Angular.js+bootstrap的企业网银项目
- JS中出现“$(...).dropdown is not a function”错误的解决
- 关于错误:Uncaught Error: Bootstrap's JavaScript requires jQuery bootstrap.js:8 at bootstrap.js:8
- Require.js、Angular.js整合
- getBoundingClientRect的用法
- 【项目心得】在微信网页上的点击按钮复制功能
- 网上的爆客软件实现流程
- 如何查看mysql 优化后的执行语句
- 基姆拉尔森公式计算周几的C语言实现方法
- 解决Error:Bootstrap dropdown require Popper.js (https://popper.js.org)
- Flask零基础到项目实战(七)请求方法、g对象和钩子函数
- Hadoop学习笔记 1
- 不同领域的人们是怎样使用思维导图的(下)
- HDU
- NIO学习之Selector,SelectionKey与客户端与服务端通信简单实现(1)
- mongoose
- Hdu 1231 最大连续子序列
- Android 根据Uri删除文件