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

最近在学习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使用