如何在Vue webpack-simple模板中引入Bootstrap3与jQuery并解决报错

看来你在Vue项目里整合Bootstrap 3时遇到了连续的小坑，我来帮你一步步搞定：

一、解决Uncaught ReferenceError: jQuery is not defined错误 #

这个问题的核心是Bootstrap的JS依赖jQuery，但webpack没有正确将jQuery全局注入，导致Bootstrap找不到它。按下面的步骤调整：

1. 确保webpack模块被正确引入
   在webpack.config.js的最顶部添加：

   const webpack = require('webpack');
   

   不然webpack.ProvidePlugin会因为找不到webpack变量而失效。

2. 完善ProvidePlugin配置
   调整plugins部分，确保jQuery被全局挂载到window对象上，让Bootstrap能直接访问：

   module.exports = {
     // ... 你的其他配置项
     plugins: [
       new webpack.ProvidePlugin({
         $: 'jquery',
         jQuery: 'jquery',
         'window.jQuery': 'jquery' // 这行是关键，覆盖Bootstrap对window.jQuery的依赖
       })
     ]
   }
   

3. 调整main.js的引入顺序
   确保jQuery在Bootstrap之前被加载（虽然ProvidePlugin已经全局注入，但手动挂载能避免一些边缘问题）：

   // src/main.js
   import $ from 'jquery'
   window.$ = window.jQuery = $
   import 'bootstrap' // 引入Bootstrap的JS
   

做完这些，重启webpack-dev-server，jQuery未定义的错误应该就消失了。

二、解决Bootstrap字体文件编译错误 #

这个问题是因为你的webpack loader配置格式错误，而且没有覆盖Bootstrap用到的所有字体类型：

1. 先安装file-loader依赖
   如果还没安装，执行：

   npm install file-loader --save-dev
   

2. 修正module.rules配置
   注意module.rules必须是数组（你之前写成了对象，这是致命错误），并且要包含Bootstrap用到的woff、woff2、eot等字体格式：

   module.exports = {
     // ... 其他配置
     module: {
       rules: [
         // ... 保留你已有的其他loader（比如处理.vue文件、css文件的loader）
         {
           test: /\.(png|jpg|gif|svg|ttf|woff|woff2|eot)$/,
           loader: 'file-loader',
           options: {
             name: '[name].[ext]?[hash]'
           }
         }
       ]
     }
   }
   

3. 正确引入Bootstrap CSS
   在src/main.js里添加：

   import 'bootstrap/dist/css/bootstrap.css'
   

最后，再次重启webpack-dev-server，字体文件的编译错误就会解决，Bootstrap的样式和图标也能正常加载了。

内容的提问来源于stack exchange，提问作者tolyan