Bootstrap 5 配置 Vite 开发环境，Vite+Bootstrap 构建利弊分析？

本文共计833个文字，预计阅读时间需要4分钟。

Bootstrap 5 在 Vite 中使用时，如果不是开箱即用的，必须显式处理 CSS、JS 和依赖顺序。否则，常见组件（如 Modal、Dropdown）可能会直接报错或无响应。

---

import 'bootstrap' 报 ReferenceError: Popper is not defined

这是最常踩的坑。Bootstrap 5 的 JS 组件（除 Toast 外）全部依赖 @popperjs/core 做定位计算，而 Vite 默认不自动解析其导出，也不会按需注入全局 Popper。

• 必须手动安装并确保导入顺序：

  npm install bootstrap @popperjs/core

• 在入口文件（如 main.ts）中严格按此顺序写：

  import 'bootstrap/dist/css/bootstrap.min.css'<br>import '@popperjs/core'<br>import 'bootstrap'

• 错误写法（哪怕只调换后两行）会导致 Modal 初始化失败、Dropdown 不展开、控制台持续报错

---

vite.config.js 里要不要配 alias 指向 bootstrap？

没必要，反而容易误导。