Vue3项目集成Bootstrap-Vue编译失败求助

问题背景 #

使用vue create创建Vue3项目后，执行npm install bootstrap-vue@latest安装依赖，编写App.vue并修改main.js后，编译阶段出现模块导出警告，运行时抛出vue__WEBPACK_IMPORTED_MODULE_1__.default is undefined错误。

原代码文件 #

src/main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // Import the router configuration
import store from './store';   // Import the store configuration

import 'bootstrap/dist/css/bootstrap.css'; // Import Bootstrap CSS
import 'bootstrap-vue/dist/bootstrap-vue.css'; // Import BootstrapVue CSS
import { BootstrapVue } from 'bootstrap-vue'; // Import BootstrapVue

createApp(App)
  .use(router) // Use the router
  .use(store)  // Use the store
  .use(BootstrapVue)
  .mount('#app');

App.vue

<template>
  <div>
    <template v-if="!$route.meta.allowAnonymous">
      <v-app id="inspire">
        <div class="app-container">
          <toolbar @toggleNavigationBar="drawer = !drawer"/>
          <navigation :toggle="drawer"/>
          <v-content>
            <breadcrumbs />
            <router-view/>
            <page-footer />
          </v-content>
        </div>
      </v-app>
    </template>
    <template v-else>
      <transition>
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </transition>
    </template>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      drawer: true
    }
  }
}
</script>

<style>
  .v-btn:hover:before{
    color: transparent !important;
  }
</style>

编译警告 #

WARNING  Compiled with 2 warnings                                                                                                                           3:25:29 pm

 warning  in ./node_modules/bootstrap-vue/esm/vue.js

export 'default' (imported as 'Vue') was not found in 'vue' (possible exports: BaseTransition, BaseTransitionPropsValidators, Comment, EffectScope, Fragment, KeepAlive, ReactiveEffect, Static, Suspense, Teleport, Text, Transition, TransitionGroup, VueElement, assertNumber, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compatUtils, compile, computed, createApp, createBlock, createCommentVNode, createElementBlock, createElementVNode, createHydrationRenderer, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, defineAsyncComponent, defineComponent, defineCustomElement, defineEmits, defineExpose, defineModel, defineOptions, defineProps, defineSSRCustomElement, defineSlots, devtools, effect, effectScope, getCurrentInstance, getCurrentScope, getTransitionRawChildren, guardReactiveProps, h, handleError, hasInjectionContext, hydrate, initCustomFormatter, initDirectivesForSSR, inject, isMemoSame, isProxy, isReactive, isReadonly, isRef, isRuntimeOnly, isShallow, isVNode, markRaw, mergeDefaults, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, stop, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, toValue, transformVNodeArgs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useModel, useSSRContext, useSlots, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withMemo, withModifiers, withScopeId)

 warning  in ./node_modules/bootstrap-vue/esm/vue.js

export 'default' (reexported as 'Vue') was not found in 'vue' (possible exports: BaseTransition, BaseTransitionPropsValidators, Comment, EffectScope, Fragment, KeepAlive, ReactiveEffect, Static, Suspense, Teleport, Text, Transition, TransitionGroup, VueElement, assertNumber, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compatUtils, compile, computed, createApp, createBlock, createCommentVNode, createElementBlock, createElementVNode, createHydrationRenderer, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, defineAsyncComponent, defineComponent, defineCustomElement, defineEmits, defineExpose, defineModel, defineOptions, defineProps, defineSSRCustomElement, defineSlots, devtools, effect, effectScope, getCurrentInstance, getCurrentScope, getTransitionRawChildren, guardReactiveProps, h, handleError, hasInjectionContext, hydrate, initCustomFormatter, initDirectivesForSSR, inject, isMemoSame, isProxy, isReactive, isReadonly, isRef, isRuntimeOnly, isShallow, isVNode, markRaw, mergeDefaults, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, stop, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, toValue, transformVNodeArgs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useModel, useSSRContext, useSlots, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withMemo, withModifiers, withScopeId)

运行时错误 #

Uncaught runtime errors:
ERROR
vue__WEBPACK_IMPORTED_MODULE_1__.default is undefined
@webpack-internal:///./node_modules/bootstrap-vue/esm/vue.js:90:14
./node_modules/bootstrap-vue/esm/vue.js@http://localhost:8080/js/chunk-vendors.js:3472:1
__webpack_require__@http://localhost:8080/js/app.js:600:33
fn@http://localhost:8080/js/app.js:834:21
@webpack-internal:///./node_modules/bootstrap-vue/esm/constants/events.js:66:81
./node_modules/bootstrap-vue/esm/constants/events.js@http://localhost:8080/js/chunk-vendors.js:2427:1
__webpack_require__@http://localhost:8080/js/app.js:600:33
fn@http://localhost:8080/js/app.js:834:21
@webpack-internal:///./node_modules/bootstrap-vue/esm/components/alert/alert.js:9:95
./node_modules/bootstrap-vue/esm/components/alert/alert.js@http://localhost:8080/js/chunk-vendors.js:139:1
__webpack_require__@http://localhost:8080/js/app.js:600:33
fn@http://localhost:8080/js/app.js:834:21
@webpack-internal:///./node_modules/bootstrap-vue/esm/components/alert/index.js:6:83
./node_modules/bootstrap-vue/esm/components/alert/index.js@http://localhost:8080/js/chunk-vendors.js:150:1
__webpack_require__@http://localhost:8080/js/app.js:600:33
fn@http://localhost:8080/js/app.js:834:21
@webpack-internal:///./node_modules/bootstrap-vue/esm/components/index.js:6:83
./node_modules/bootstrap-vue/esm/components/index.js@http://localhost:8080/js/chunk-vendors.js:1129:1
__webpack_require__@http://localhost:8080/js/app.js:600:33
fn@http://localhost:8080/js/app.js:834:21
@webpack-internal:///./node_modules/bootstrap-vue/esm/index.js:1565:88
./node_modules/bootstrap-vue/esm/index.js@http://localhost:8080/js/chunk-vendors.js:2746:1
__webpack_require__@http://localhost:8080/js/app.js:600:33
fn@http://localhost:8080/js/app.js:834:21
@webpack-internal:///./src/main.js:10:90
./src/main.js@http://localhost:8080/js/app.js:107:1
__webpack_require__@http://localhost:8080/js/app.js:600:33
__webpack_exports__<@http://localhost:8080/js/app.js:1722:109
__webpack_require__.O@http://localhost:8080/js/app.js:646:23
@http://localhost:8080/js/app.js:1723:53
@http://localhost:8080/js/app.js:1725:12

解决方案 #

核心原因 #

原bootstrap-vue包仅支持Vue2，Vue3需要使用官方维护的适配版本bootstrap-vue-3。

操作步骤 #

1. 卸载旧依赖

   npm uninstall bootstrap-vue
   

2. 安装Vue3兼容版本

   npm install bootstrap-vue-3 bootstrap
   

3. 更新src/main.js
   修改导入和注册逻辑，适配Vue3的API：

   import { createApp } from 'vue';
   import App from './App.vue';
   import router from './router';
   import store from './store';
   
   // 导入样式文件
   import 'bootstrap/dist/css/bootstrap.css';
   import 'bootstrap-vue-3/dist/bootstrap-vue-3.css';
   // 导入BootstrapVue3插件
   import BootstrapVue3 from 'bootstrap-vue-3';
   
   createApp(App)
     .use(router)
     .use(store)
     .use(BootstrapVue3)
     .mount('#app');
   

4. 修正App.vue中的组件错误
   原代码中的<v-app>、<v-content>是Vuetify框架的组件，并非Bootstrap-Vue的组件，需替换为Bootstrap-Vue的布局组件或调整结构：

   <template>
     <div>
       <template v-if="!$route.meta.allowAnonymous">
         <div class="app-container">
           <toolbar @toggleNavigationBar="drawer = !drawer"/>
           <navigation :toggle="drawer"/>
           <main class="py-4">
             <breadcrumbs />
             <router-view/>
             <page-footer />
           </main>
         </div>
       </template>
       <template v-else>
         <transition>
           <keep-alive>
             <router-view></router-view>
           </keep-alive>
         </transition>
       </template>
     </div>
   </template>
   
   <script>
   export default {
     name: 'App',
     data() {
       return {
         drawer: true
       }
     }
   }
   </script>
   
   <style>
     .v-btn:hover:before{
       color: transparent !important;
     }
   </style>
   

5. 重启项目

   npm run serve
   

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