篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-cli项目中单文件组件引入bootstrap.js异常的解决方案相关的知识，希望对你有一定的参考价值。
0.修改webpack.base.conf.js
1 var webpack = require ("webpack") //add
2
3 //...
4
5 module.exports = {
6 resolve: {
7 extensions: [‘.js‘, ‘.vue‘, ‘.json‘],
8 alias: {
9 ‘vue$‘: ‘vue/dist/vue.esm.js‘,
10 ‘@‘: resolve(‘src‘),
11 ‘jquery‘ : ‘jquery‘ //add
12 }
13 },
14 // add
15 plugins : [
16 new webpack.ProvidePlugin ({
17 // 将jquery及其别名注册到全局
18 $ : "jquery" ,
19 jQuery : "jquery",
20 ‘window.jQuery‘ : ‘jquery‘ ,
21 // 将Popper及其别名注册到全局
22 Popper : [‘popper.js‘ , ‘default‘]
23 })
24 ]
25 //...
26 }
1.修改bootstrap源码
1 (function (global, factory) {
2 typeof exports === ‘object‘ && typeof module !== ‘undefined‘ ? factory(exports, require(‘jquery‘), require(‘popper.js‘)) :
3 typeof define === ‘function‘ && define.amd ? define([‘exports‘, ‘jquery‘, ‘popper.js‘], factory) :
4 (factory((global.bootstrap = {}),global.jQuery,global.Popper));
5 }(
6 window , // 此参数原本为this,改为window
7 (function (exports,$,Popper) { ‘use strict‘;
8
9 $ = $ && $.hasOwnProperty(‘default‘) ? $[‘default‘] : $;
10 Popper = Popper && Popper.hasOwnProperty(‘default‘) ? Popper[‘default‘] : Popper;
11 //...
12 }))) ;
2.在单文件组件(.vue)或main.js中引入bootstrap.js
import ‘/the/path/of/bootstrap.js‘
3.END