Vue.js项目导入Bootstrap时出现报错该如何解决？

核心报错原因 #

• 依赖包安装拼写错误：执行的安装命令中boostrap拼写错误，正确包名为bootstrap，会导致Bootstrap实际未安装成功。
• 导入顺序不符合要求：如果使用Bootstrap 4版本，必须在导入Bootstrap JS前先导入jQuery和Popper.js，否则会触发依赖缺失报错。
• 版本不匹配：Bootstrap 5已移除对jQuery和Popper.js的依赖，若安装Bootstrap 5版本却额外引入旧版本依赖，也可能引发冲突报错。

具体解决步骤 #

方案1：使用Bootstrap 5（推荐，无需额外依赖） #

1. 卸载错误安装的包，执行命令：
   npm uninstall boostrap jquery popper.js
2. 重新安装正确的Bootstrap 5包：
   npm i bootstrap
3. 修改main.js导入代码：

import Vue from 'vue'
import App from './App'
import router from './router'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'
import 'bootstrap/dist/css/bootstrap.min.css'

方案2：使用Bootstrap 4（需jQuery、Popper依赖） #

1. 卸载错误安装的包，执行命令：
   npm uninstall boostrap jquery popper.js
2. 安装匹配版本的依赖：
   npm i bootstrap@4 jquery popper.js
3. 配置webpack自动注入jQuery，避免全局变量未定义报错：如果是Vue CLI创建的项目，在项目根目录新建vue.config.js，添加以下配置：

const webpack = require('webpack')
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default']
      })
    ]
  }
}

4. 修改main.js导入顺序：

import Vue from 'vue'
import App from './App'
import router from './router'
import 'jquery'
import 'popper.js'
import 'bootstrap/dist/js/bootstrap.min.js'
import 'bootstrap/dist/css/bootstrap.min.css'

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