BootstrapVue toast触发后立即消失，该如何排查解决？

• 检查Bootstrap版本匹配度
  BootstrapVue 2.21.2仅兼容Bootstrap 4.5.x ~ 4.6.x版本，若你当前项目安装的是Bootstrap 5.x，样式和JS逻辑不兼容会直接导致toast渲染后立刻消失。卸载错误版本重装对应版本即可：

  npm uninstall bootstrap && npm install bootstrap@4.6.2
  

  注意入口文件（main.js）的CSS引入顺序要正确，先引入Bootstrap基础样式，再引入BootstrapVue的样式：

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

• 确认BootstrapVue完整注册
  需在main.js中全局注册BootstrapVue，确保$bvToast实例正确挂载：

  import Vue from 'vue'
  import { BootstrapVue } from 'bootstrap-vue'
  Vue.use(BootstrapVue)
  

• 手动指定toast挂载节点
  若你项目的根挂载节点存在动态销毁、重建的逻辑，会导致挂载在根节点下的toast跟随节点一起被销毁，调用时指定挂载到body节点即可解决：

  this.$bvToast.toast(`This is toast number ${this.toastCount}`, {
    title: 'BootstrapVue Toast',
    autoHideDelay: 5000,
    appendToast: append,
    container: 'body'
  })
  

• 排查全局样式冲突
  若项目内有自定义全局CSS给.toast类设置了display: none !important、opacity: 0这类强制样式，也会触发toast闪现问题，你可以用浏览器开发者工具选中toast元素，查看样式继承规则定位冲突。

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