Vue中引入jQuery问题 :Bootstrap's JavaScript requires jQuery

vue.js 同时被 2 个专栏收录
2 篇文章 0 订阅
1 篇文章 0 订阅

最近在学习Vue.js,Vue中引入jQuery有2种方式,一种是在index.html中引入node_modules中的jquery插件包里的jquery.js.

另一种方式是在main.js中引入,网上很多介绍方法都是在webpack.config.js中的module.exports最后加

 new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jquery: 'jquery'
    })

但还是无法解决Bootstrap's JavaScript requires jQuery的错误。

这里建议大家,官网是最权威的参考。

各种技术更新换代太快,网上的技术博客论坛介绍的方法也许随着产品的版本迭代就不能用了,所以,一定要参考官网。尽管官网都是英文,但还是效率高很多。下面是官网给出的方法:vue 引入jquery

Vue 引入jQuery:

1.下载expose-loader:

npm install expose-loader --save-dev
2. 在webpack里配置expose-loader,若想将jQuery公开为全局 名 $:
// webpack.config.js
module: {
  rules: [{
    test: require.resolve('jquery'),
    use: [{
      loader: 'expose-loader',
      options: '$'
    }]
  }]
}

3. Let's say you also want to expose it as window.jQuery in addition to window.$. For multiple expose you can use ! in loader string:

如果你想公开为window.jQuery或者window.$ ,你可以这样配置:

// webpack.config.js
module: {
  rules: [{
    test: require.resolve('jquery'),
    use: [{
      loader: 'expose-loader',
      options: 'jQuery'
    },{
      loader: 'expose-loader',
      options: '$'
    }]
  }]
}

4. 然后在main.js中

import $ from 'jquery'     //引入jquery
import '../node_modules/bootstrap/dist/css/bootstrap.css'
import '../node_modules/bootstrap/dist/js/bootstrap.js'

new Vue({
  el: '#app',
   $,               //使用$
  render: h => h(App)
})

5. 在chrome的控制台输入:

console.log(jQuery)

就不会报错了。Bootstrap's JavaScript requires jQuery可以这样解决。


参考链接:

webpack中expose-loader使用





  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

蕉风夜雨

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值