Vue3+TypeScript项目引入BootstrapVue报类型不匹配错误如何解决？

问题根因 #

你使用的bootstrap-vue是仅适配Vue2的版本，其插件注册逻辑基于Vue2的全局构造函数Vue设计，和Vue3的createApp实例注册体系完全不兼容，同时你代码中引入Vue2风格的import Vue from 'vue'在Vue3项目中也是无效的。

解决方案 #

方案1：使用适配Vue3的BootstrapVue 3版本 #

• 先卸载原有不兼容的包

npm uninstall bootstrap-vue

• 安装Vue3适配版及依赖

npm install bootstrap bootstrap-vue-3 @popperjs/core

• 修正你的main.ts代码：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// 引入Bootstrap和BootstrapVue3的样式
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
// 引入Vue3版本的BootstrapVue
import BootstrapVue3 from 'bootstrap-vue-3'

createApp(App)
  .use(router)
  .use(BootstrapVue3)
  .mount('#app')

方案2：直接使用原生Bootstrap 5 #

Bootstrap 5已完全移除jQuery依赖，不需要封装插件也可直接在Vue3项目中使用，适合不需要BootstrapVue封装组件的场景：

• 安装依赖

npm install bootstrap @popperjs/core

• 在main.ts中引入即可

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'

createApp(App)
  .use(router)
  .mount('#app')

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