Vue Bootstrap部分动态组件无法运行的问题求助

你的问题核心是依赖冲突、冗余导入以及动态组件使用方式错误导致tooltip、sidebar这类需要交互的组件失效，下面分步解决：

1. 清理冲突依赖 #

你同时安装了Vue2版本的bootstrap-vue和Vue3版本的bootstrap-vue-3，这两个库会直接冲突；另外Bootstrap 5已经不再依赖jQuery，旧版popper.js也和@popperjs/core（Bootstrap 5要求的v2版本）冲突。

执行命令卸载冗余依赖：

npm uninstall bootstrap-vue popper.js jquery

2. 修正main.js导入逻辑 #

BootstrapVue3已经封装了Bootstrap的动态组件逻辑，不需要手动导入原生Bootstrap JS、jQuery和Popper，修改后的main.js如下：

import { createApp } from 'vue';
import App from './App.vue';
import 'bootstrap/dist/css/bootstrap.min.css';
import BootstrapVue3 from 'bootstrap-vue-3';
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css';
import VCalendar from 'v-calendar';
import 'v-calendar/style.css';
import 'bootstrap-icons/font/bootstrap-icons.css';

const app = createApp(App);

app.use(BootstrapVue3);
app.use(VCalendar, {});

app.mount('#app');

3. 修正组件样式导入 #

你在组件样式里导入了旧版bootstrap-vue的样式文件，和bootstrap-vue-3的样式冲突，同时main.js已经导入过核心样式，重复导入会导致样式混乱，修改后的组件样式：

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
@import url('bootstrap/dist/css/bootstrap.css');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css");

4. 确保动态组件正确使用 #

BootstrapVue3的动态组件需要使用其提供的Vue指令或组件，不能直接用原生Bootstrap的data-*属性，举几个示例：

• Tooltip：使用v-b-tooltip指令

<button v-b-tooltip title="这是tooltip内容">鼠标悬停查看</button>

• Sidebar：使用<b-sidebar>组件

<button @click="sidebarVisible = true">打开侧边栏</button>
<b-sidebar v-model="sidebarVisible" title="侧边栏标题">
  侧边栏内容
</b-sidebar>

• Carousel：使用<b-carousel>组件

<b-carousel>
  <b-carousel-slide img-src="slide1.jpg" caption="第一张轮播图"></b-carousel-slide>
  <b-carousel-slide img-src="slide2.jpg" caption="第二张轮播图"></b-carousel-slide>
</b-carousel>

5. 验证最终依赖版本 #

确保package.json里的相关依赖如下（冗余项已移除）：

{
  "dependencies": {
    "@popperjs/core": "^2.11.8",
    "bootstrap": "^5.3.3",
    "bootstrap-icons": "^1.11.3",
    "bootstrap-vue-3": "^0.5.1",
    "core-js": "^3.8.3",
    "v-calendar": "^3.1.2",
    "vue": "^3.4.21",
    "vue-screen-utils": "^1.0.0-beta.13"
  }
}

做完以上步骤后，重新启动项目，动态组件应该就能正常工作了。

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