Vue CLI集成Bootstrap-Vue失败，页面空白且报导入错误求助

Bootstrap-Vue目前仅支持Vue 2版本，而你的项目基于Vue 3（使用createApp写法），两者的初始化机制不兼容：Vue 3不再导出默认的Vue构造函数，而Bootstrap-Vue的配置代码依赖Vue 2的Vue.use()方式，这直接导致了export 'default' (imported as 'Vue') was not found in 'vue'警告，最终引发页面空白。

解决方案一：改用Vue 3兼容的Bootstrap组件库 #

推荐使用BootstrapVueNext（Bootstrap-Vue官方维护的Vue 3适配版），操作步骤如下：

1. 卸载不兼容的旧依赖：

yarn remove vue bootstrap bootstrap-vue

2. 安装适配Vue 3的新依赖：

yarn add bootstrap bootstrap-vue-next

3. 修改main.js为Vue 3适配的配置：

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'

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

解决方案二：将项目降级到Vue 2（若必须使用原版Bootstrap-Vue） #

1. 卸载Vue 3相关依赖：

yarn remove vue @vue/cli-service

2. 安装Vue 2及对应版本的CLI工具：

yarn add vue@2.x
yarn add @vue/cli-service@4.x --dev

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')

4. 重新启动项目：

yarn serve

内容的提问来源于stack exchange，提问作者R-C