Vue.js中引入Bootstrap后页面空白问题求助

你的页面空白主要由三个核心问题导致，逐一修正即可解决：

1. BootstrapVue 版本不兼容 #

BootstrapVue 仅支持 Vue 2，而你使用的是 Vue 3（从createApp的导入方式可判断），框架版本冲突会直接导致页面无法渲染。需替换为兼容 Vue 3 的 Bootstrap 集成库，推荐使用 BootstrapVue3。

先安装依赖：

npm install bootstrap bootstrap-vue-3

2. main.js 初始化代码错误 #

你错误地在App组件上调用了use方法，正确做法是先创建 Vue 应用实例，再在实例上调用use。修正后的main.js代码：

import { createApp } from 'vue'
import App from './App.vue'
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)
// 在实例上注册 BootstrapVue3
app.use(BootstrapVue3)
// 挂载应用
app.mount('#app')

3. 模板注释格式错误 #

Vue 模板仅支持标准 HTML 注释<!-- 内容 -->，你使用的-- this is the bootstrap components是无效注释，会被解析为文本节点导致渲染异常。修正后的App.vue模板部分：

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>

  <!-- Bootstrap 导航组件 -->
  <nav class="navbar navbar-light bg-light">
    <div class="container-fluid">
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </nav>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

完成以上三步后，重新启动项目，页面即可正常渲染 Bootstrap 组件。

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