vue-cli项目中单文件组件引入bootstrap.js异常的解决方案

0.修改webpack.base.conf.js

var webpack = require ("webpack") //add

//...

module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'jquery' : 'jquery' //add
    }
  },
  // add
  plugins : [
    new webpack.ProvidePlugin ({
      // 将jquery及其别名注册到全局
      $ : "jquery" ,
      jQuery : "jquery",
      'window.jQuery' : 'jquery' ,
      // 将Popper及其别名注册到全局
      Popper : ['popper.js' , 'default']
    })
  ] 
//...
}

1.修改bootstrap源码

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('jquery'), require('popper.js')) :
    typeof define === 'function' && define.amd ? define(['exports', 'jquery', 'popper.js'], factory) :
    (factory((global.bootstrap = {}),global.jQuery,global.Popper));
}(
  window , // 此参数原本为this,改为window
  (function (exports,$,Popper) { 'use strict';

$ = $ && $.hasOwnProperty('default') ? $['default'] : $;
Popper = Popper && Popper.hasOwnProperty('default') ? Popper['default'] : Popper;
//...
}))) ;

2.在单文件组件(.vue)或main.js中引入bootstrap.js

import '/the/path/of/bootstrap.js'

3.END