Vue3使用Bootstrap-Vue组件报错，安装插件后问题仍未解决

我在学习Vue.js时，尝试使用Bootstrap-Vue的b-table等组件，先后遇到两个问题：

第一个警告 #

[Vue warn]: Failed to resolve component: b-table
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

第二个错误 #

手动导入组件后出现：

[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.

按提示安装@vitejs/plugin-vue后问题仍未解决，相关代码如下：

App.vue #

<template>
  <header>toDoList</header>
  <b-table striped hover :items="list"></b-table>
  <input v-model="newTask">
  <input v-model="newTaskDate">
  <button @click="addnewTask()">add new Task</button>
</template>

<script>
import { BTable } from bootstrap-vue;
export default {
  data() {
    return {
      list: [{name:"Doing somwthing",date:"1"}],
      newTask: '',
      newTaskDate: ''
    }
  },
  methods: {
    addnewTask() {
      this.list.push({name:this.newTask, date:this.newTaskDate})
    }
  }
}
</script>

main.js #

import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

import './assets/main.css'

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

核心问题 #

1. 组件未注册：Bootstrap-Vue组件未在Vue中注册，导致无法识别b-table
2. 版本不兼容：当前使用Vue 3，但原版Bootstrap-Vue仅支持Vue 2，这是关键矛盾
3. Vite配置缺失：即使安装了@vitejs/plugin-vue，未在配置文件中启用也会导致.vue文件解析失败

具体修复步骤 #

1. 替换为Vue 3兼容的Bootstrap组件库

卸载原版Bootstrap-Vue，安装官方维护的Vue 3适配版本：

npm uninstall bootstrap-vue
npm install bootstrap-vue-3 bootstrap

2. 注册组件库

修改main.js全局注册所有组件（推荐）：

import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'

// 导入BootstrapVue3及样式
import BootstrapVue3 from 'bootstrap-vue-3'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'

const app = createApp(App)
app.use(BootstrapVue3)
app.mount('#app')

若只想局部注册BTable，修改App.vue的script部分：

<script>
import { BTable } from 'bootstrap-vue-3'
export default {
  components: {
    BTable // 注册后模板可正常使用<b-table>
  },
  // 其余代码不变
}
</script>

3. 完善Vite配置

确保项目根目录存在vite.config.js，内容如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()] // 必须启用vue插件处理.vue文件
})

4. 修正代码拼写错误（可选）

将App.vue中Doing somwthing改为Doing something，不影响功能但更规范

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