vue-cli项目中单文件组件引入bootstrap.js异常的解决方案
2018-03-31 19:20
1696 查看
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
相关文章推荐
- Vue-cli项目中,引入css、js或者引入组件,检查后未发现错误,npm红叉报错原因
- Vue-cli项目中引入外部/第三方css/js/less文件具体步骤
- Vue-cli构建项目, 组件中js代码引入图片路径问题
- vue-cli搭建的项目引入.css文件报错
- vue.js vue组件中style样式中的css引入背景图路径不对,解决方案
- 如何在vue && webpack 项目中的单文件组件中引入css
- vue.js vue组件中style样式中的css引入背景图路径不对,解决方案
- vue-cli2.x项目优化之引入本地静态库文件的方法
- Vue-cli单文件组件引入less、sass、css样式的不同方法
- 详解vue-cli快速构建项目以及引入bootstrap、jq
- (vue.js)vue-cli构建,scss文件引入本地css意外报错
- vue cli搭建项目及文件引入
- vue2.0 使用vue-cli搭建的项目如何在index.html里引入静态css和js
- 如何在vue-cli+webpack构建的项目引入jquery和bootstrap
- webpack+vue-cli项目中引入外部非模块格式js的方法
- vue-cli搭建的项目中引入jquery和bootstrap
- 使用vue-cli搭建项目的使用,需要引入font-icon文件,报错的解决办法
- Vue.js项目引入less文件报错解决
- 如何在 Vue-cli 创建的项目中引入 iView组件UI
- 饿了么项目---1、vue-cli快速构建项目(包括兼容老项目时需引入bootstrap、jquery的方法)