在vuejs3项目中使用bootstrap-vue没有编译成功

问题描述 投票：0回答：1

我正在做一个使用 bootstrap-vue 的 vue3 应用程序。我使用 vue create 创建了一个 vuejs3 项目，然后使用 

npm install bootstrap-vue@latest
安装了 boostrap-vue 。我从开源应用程序 vue-admin-template 创建了 App.vue。我修改了我的 main.js 如下：

我的 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');

我的应用程序.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>

我在 vue 控制台中收到以下警告：

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)

当我运行 localhost:8080 时，我还得到了错误列表：

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

请帮忙解决问题。

vuejs3 bootstrap-vue
1个回答
0
投票

bootstrap-vue 仍然不支持 Vue 3，除非迁移构建。

您可以尝试bootstrap-vue-next，这将是v3版本，但仍处于alpha阶段：

npm i bootstrap-vue-next
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.