正确的引入依赖库(jQuery, popper.js)

对于使用vue-cli构建的vue项目，需要修改build/webpack.base.conf.js文件，修改两处代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
module.exports = {
  //other code ...

  resolve: {
    extensions: ['', '.js', '.vue'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      
      // webpack 使用 jQuery，如果是自行下载的
      // 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'),
      // 如果使用NPM安装的jQuery
      'jquery': 'jquery',
      'popper': 'popper.js'
    }
  },

  // ...
  // 增加一个plugin
  plugins: [
    new webpack.ProvidePlugin({
      '$': 'jquery',
      'jQuery': 'jquery',
      'Popper': 'popper'
    })
  ]

参数alias是用来指明路径，上面就指明了jquery,popper分别指向用npm下载下来的jquery和popper.js第三方库。

参数plugins则是定义全局变量。'Popper': 'popper'后面的popper就是alias中定义的路径。

这样就是可以正确的引用bootstrap.js了：

1
import 'bootstrap/dist/js/bootstrap.js'