Vue 3安装配置bootstrap-vue-3时出现Rollup解析失败报错

API 探路者

2026-8-31

报错产生原因

bootstrap-vue-3当前正式发布版本的内部依赖路径，是按照Bootstrap 5.2.x及更早版本的目录结构编写的，对应JS组件入口在bootstrap/js/dist/路径下。
执行npm i --save bootstrap bootstrap-vue-3时如果不指定bootstrap版本，npm会默认拉取最新的Bootstrap 5.3.x版本，该版本调整了内部JS文件的目录结构，原js/dist/路径下的文件被移除，导致Rollup打包时无法解析bootstrap-vue-3引用的依赖文件，抛出对应报错。

解决方法

方案一：安装兼容版本的Bootstrap（推荐，无兼容问题）
1. 卸载当前不兼容的bootstrap版本
```
npm uninstall bootstrap
```
2. 安装和bootstrap-vue-3适配的5.2.3版本
```
npm install bootstrap@5.2.3
```
3. 重启本地开发服务/重新执行构建命令即可，原有main.js中的配置无需修改。
方案二：适配高版本Bootstrap（适合需要使用Bootstrap 5.3新特性的场景）
以Vite创建的Vue3项目为例，在项目根目录的vite.config.js中添加路径别名配置，将旧的依赖路径映射到新版本Bootstrap的JS文件目录，配置代码如下：
```
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'node:path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      'bootstrap/js/dist': path.resolve(__dirname, 'node_modules/bootstrap/js/src')
    }
  }
})
```
配置保存后重启开发服务即可消除报错。注意该方案属于兼容适配，部分bootstrap-vue-3组件可能因Bootstrap版本API变动出现功能异常，使用时需要逐一验证组件效果。