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‘ //add12 ????}13 ??},14 ??// add15 ??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
vue-cli项目中单文件组件引入bootstrap.js异常的解决方案
原文地址:https://www.cnblogs.com/maoguy/p/8683819.html