Nuxt3迁移遇bootstrap-vue引发vue无default导出报错如何修复？

报错原因 #

你遇到的错误是因为当前使用的bootstrap-vue仅支持Vue2/Nuxt2，而Nuxt3底层基于Vue3，Vue3取消了Vue构造函数的默认导出，bootstrap-vue内部的import Vue from 'vue'语法在Vue3环境下无法执行，因此触发导出匹配失败的报错。

可行修复方案 #

• 方案1：替换为适配Vue3的BootstrapVue版本
  官方适配Vue3的版本为bootstrap-vue-3，直接替换原有依赖即可：

  1. 卸载旧版本依赖：npm uninstall bootstrap-vue
  2. 安装新版本依赖：npm install bootstrap-vue-3 bootstrap
  3. 在nuxt.config.ts中配置引入：

  export default defineNuxtConfig({
    modules: ['bootstrap-vue-3/nuxt'],
    css: ['bootstrap/dist/css/bootstrap.css']
  })
  

  原有bootstrap-vue的组件API绝大多数兼容，少量差异可对照文档调整。

• 方案2：直接使用原生Bootstrap
  如果你项目中使用的BootstrapVue组件较少，可以直接移除bootstrap-vue依赖，单独引入原生Bootstrap：

  1. 安装依赖：npm install bootstrap @popperjs/core
  2. 在nuxt.config.ts中引入全局样式：

  export default defineNuxtConfig({
    css: ['bootstrap/dist/css/bootstrap.min.css'],
    vite: {
      optimizeDeps: {
        include: ['bootstrap/dist/js/bootstrap.bundle.min.js']
      }
    }
  })
  

  原有组件直接替换为带Bootstrap类名的原生HTML元素即可。

• 方案3：开启Nuxt3 Vue2兼容模式
  如果项目中大量依赖旧版bootstrap-vue，改造成本过高，可以通过兼容层支持Vue2语法：

  1. 安装Vue2兼容依赖：npm install vue@2 @vitejs/plugin-vue2 nuxt-bridge
  2. 在nuxt.config.ts中开启Vue2模式，配置完成后即可正常使用旧版bootstrap-vue。

内容的提问来源于stack exchange，提问作者S.P