Vue.js 3集成BootstrapVue报错：vue__WEBPACK_IMPORTED_MODULE_1__.default未定义

我按BootstrapVue官方文档安装Vue.js 3和BootstrapVue，项目能构建但Vue加载失败，报错Error: vue__WEBPACK_IMPORTED_MODULE_1__.default is undefined。

操作步骤：

• 执行vue create my-app创建项目，进入目录后运行vue add bootstrap-vue
• 启动项目：npm run serve
• 出现上述报错

自动生成的main.js代码：

import '@babel/polyfill'
import 'mutationobserver-shim'
import './plugins/bootstrap-vue'
import { createApp } from 'vue'
import App from './App.vue'

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

解决思路 #

1. 核心问题：BootstrapVue官方库目前只支持Vue.js 2，和你创建的Vue 3项目不兼容，导致依赖调用出错。
2. 两种解决办法：
   • 改用Vue 3适配版：BootstrapVueNext
     • 先卸载现有依赖：npm uninstall bootstrap-vue bootstrap
     • 安装兼容Vue 3的版本：npm install bootstrap-vue-next bootstrap
     • 修改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项目
     • 如果一定要用原BootstrapVue，重新创建项目时选Vue 2版本：执行vue create my-app后，在选项里选"Default ([Vue 2] babel, eslint)"，或者手动配置时选择Vue 2。

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