在VueJS 2中使用Bootstrap 5出现bootstrap.esm.js错误该如何解决？

原因1：本地依赖安装异常/版本冲突 #

你在在线环境运行正常，代码本身没有问题，优先排查本地依赖问题，按以下步骤操作：

• 删除本地node_modules文件夹、package-lock.json文件
• 执行npm cache clean --force清空npm本地缓存
• 执行npm install重新安装所有依赖，重启开发服务后验证

原因2：自动初始化时机与Vue渲染逻辑冲突 #

Bootstrap默认的data-bs-toggle自动初始化逻辑，和Vue异步DOM渲染逻辑不匹配，可能出现初始化时DOM未挂载、实例获取失败的情况，改用手动初始化即可解决：

<template>
  <section>
    <div class="dropdown" ref="dropdownRef">
      <button
        class="btn btn-secondary dropdown-toggle"
        type="button"
        id="dropdownMenuButton1"
        aria-expanded="false"
      >
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </section>
</template>

<script>
import { Dropdown } from 'bootstrap'
export default {
  data() {
    return {
      dropdownInstance: null
    }
  },
  mounted() {
    const toggleBtn = this.$refs.dropdownRef.querySelector('button')
    this.dropdownInstance = new Dropdown(toggleBtn)
  },
  // 组件销毁前手动销毁实例，避免热重载场景下的残留事件报错
  beforeDestroy() {
    if (this.dropdownInstance) {
      this.dropdownInstance.dispose()
    }
  }
}
</script>

注意移除button标签上的data-bs-toggle="dropdown"属性，避免重复初始化冲突。

原因3：第三方库冲突 #

排查项目中引入的其他JS库是否和Bootstrap下拉逻辑冲突，可临时注释掉vue-select等可能操作DOM的组件引用，验证报错是否消失。

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