Vue2集成bootstrap-vue时b-table组件无法渲染问题求助

问题定位 #

一共4处直接导致组件不渲染的错误，按影响优先级排序：

• BootstrapVue插件未正确注册
  原代码Vue.use调用方式错误，Vue.use单次仅支持注册一个插件，你将BootstrapVue作为参数传入了VueSocketIO的注册逻辑，BootstrapVue实际未完成全局注册，所有b-前缀组件都无法被Vue识别，自然不会渲染。
  原错误代码：

  Vue.use(new VueSocketIO({connection: SocketInstance}), SocketInstance, BootstrapVue);
  

  修复方式：分开注册两个插件，同时补上缺失的io导入（原代码直接使用io未导入，会直接报运行时错误）：

  // 补上io的导入
  import { io } from 'socket.io-client'
  import BootstrapVue from "bootstrap-vue";
  import "bootstrap/dist/css/bootstrap.css";
  import "bootstrap-vue/dist/bootstrap-vue.css";
  
  // 单独注册BootstrapVue
  Vue.use(BootstrapVue);
  // 再注册SocketIO插件
  Vue.use(new VueSocketIO({connection: SocketInstance}));
  

• 依赖版本不兼容
  bootstrap-vue@2.22.0仅兼容Bootstrap 4.x版本，你安装的bootstrap@5.1.3和bootstrap-vue 2.x版本完全不匹配，会导致样式异常、组件逻辑报错。
  修复方式：降级bootstrap到4.x稳定版，执行以下命令：

  npm install bootstrap@4.6.2 --save
  

• 单文件组件模板结构非法
  Vue2单文件组件的<template>标签下仅允许存在一个根节点，你的业务组件模板存在两个问题：
  1. 包裹b-table的<template>标签没有绑定任何v-if/v-for/v-slot指令，属于无意义的冗余标签
  2. 模板标签嵌套混乱，根节点.hello的闭合位置错误，模板编译阶段就会报错，导致整个组件无法渲染
     修复方式：移除冗余的空<template>标签，整理模板结构保证单根节点：

  <template>
    <div class="hello">
      <span class="title">
        <h3>
          <i class="fa fa-fw fa-pie-chart" style="margin-right: 10px"></i>
          {{ textData.classVitals }}
        </h3>
      </span>
      <br><br>
      <div>
        <b-table striped hover :items="items" :fields="fields"></b-table>
      </div>
      <h3 style="padding-bottom: 5px">{{ textData.teacherTable }}</h3>
    </div>
  </template>
  

• 组件脚本存在语法错误
  你贴出的业务组件代码存在多处语法问题，会直接导致组件初始化失败：
  1. 脚本代码没有用<script>标签包裹
  2. data()函数返回的对象缺失闭合大括号，JS解析直接报错
  3. 定义的fields字段没有传入b-table组件，虽然b-table默认会读取items的键生成列，但显式传入可以避免列顺序异常
     修复后的基础脚本结构：

  <script>
  import TeacherClassesModal from "./TeacherClassesModal.vue";
  import TimeRangeModal from "./TimeRangeModal.vue";
  import axios from "axios";
  import Spinner from "vue-simple-spinner";
  
  export default {
    name: "TeacherMonitoring",
    components: {
      showClasses: TeacherClassesModal,
      showTimeRange: TimeRangeModal,
      Spinner,
    },
    props: {
      msg: String,
    },
    data() {
      return {
        fields: ['first_name', 'last_name', 'age'],
        items: [
              { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
              { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
              { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
              { age: 38, first_name: 'Jami', last_name: 'Carney' }
          ],
        labels: [
          { text: 'ID', field: 'id' },
          { text: 'Name', field: 'name' },
          { text: 'Created', field: 'date_created' },
        ]
      }
    },
    // 补全剩余业务逻辑
  }
  </script>
  

验证方式 #

修复完成后重启本地开发服务，清空浏览器缓存，即可看到b-table正常渲染。

内容的提问来源于stack exchange，提问作者Nebojša B.