Vue3项目中使用Bootstrap-Vue报错，如何解决该问题？

错误原因 #

你当前用的是Vue 3，但Bootstrap-Vue只支持Vue 2。它内部代码试图导入Vue 2的默认导出对象，而Vue 3已经改成了createApp这类具名导出的方式，因此触发了这个导出不存在的错误。

解决办法 #

方案一：改用支持Vue3的Bootstrap组件库（推荐） #

用BootstrapVueNext（官方维护的Vue3适配版本）：

1. 卸载原有依赖

npm uninstall bootstrap-vue bootstrap

2. 安装BootstrapVueNext

npm install bootstrap-vue-next bootstrap

3. 修改main.js代码

import { createApp } from 'vue'
import App from './App.vue'
import BootstrapVueNext from 'bootstrap-vue-next'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'

createApp(App).use(BootstrapVueNext).mount('#app')

方案二：降级到Vue 2（仅当必须用Bootstrap-Vue时） #

如果一定要用原版Bootstrap-Vue，得把项目降级为Vue 2环境：

1. 卸载Vue 3

npm uninstall vue

2. 安装Vue 2

npm install vue@2

3. 修改main.js为Vue 2的写法

import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

new Vue({
  render: h => h(App)
}).$mount('#app')

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