Vue项目引入Bootstrap-Vue报错：No matching export in vue.runtime.esm-bundler.js

问题根源 #

你通过npm init vue@latest创建的是Vue 3项目，但bootstrap-vue是专为Vue 2开发的组件库，它的代码依赖Vue 2的默认导出写法（import Vue from 'vue'），而Vue 3采用了全新的组合式API架构，不再提供默认导出，只有createApp这类具名导出，因此触发了No matching export in "vue.runtime.esm-bundler.js" for import "default"的错误。

解决方案 #

方案1：改用支持Vue 3的Bootstrap组件库 #

使用bootstrap-vue-next（BootstrapVue官方推出的Vue 3适配版本），操作步骤如下：

1. 卸载原有的bootstrap-vue依赖：

npm uninstall bootstrap-vue

2. 安装适配Vue 3的组件库及Bootstrap核心：

npm install bootstrap bootstrap-vue-next

3. 修改main.js的引入代码：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { BootstrapVueNext } from 'bootstrap-vue-next'

// 导入Bootstrap和组件库的样式文件
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'

import App from './App.vue'
import router from './router'

import './assets/main.css'

const app = createApp(App)

app.use(BootstrapVueNext)
app.use(createPinia())
app.use(router)

app.mount('#app')

方案2：切换到Vue 2项目（仅适合有特殊需求的场景） #

如果必须使用原版bootstrap-vue，需要重新创建Vue 2项目：

1. 安装Vue CLI工具（若未安装）：

npm install -g @vue/cli

2. 创建Vue 2项目：

vue create vue2-project

3. 在Vue 2项目中安装依赖：

npm install bootstrap bootstrap-vue

4. 修改main.js的引入代码（Vue 2写法）：

import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

import App from './App.vue'
import router from './router'

Vue.use(BootstrapVue)

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

额外提示 #

你原有代码中还有一处明显错误：Vue 3不存在全局Vue对象，Vue.use(BootstrapVue)的写法本身不符合Vue 3的API规范，即使组件库支持Vue 3，也必须通过app.use()来注册插件。

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