Bootstrap CSS 和 JS 必须分开导入且顺序正确：先 import '@popperjs/core'，再 import 'bootstrap/dist/js/bootstrap.min.js'，CSS 可放最前；需在 vite.config.js 中配置 optimizeDeps.include 包含 'bootstrap' 和 '@popperjs/core'（若用 jQuery 则一并加入）；图标应改用 bootstrap-icons 包的内联 SVG 方案；Vue 中 Modal 等组件必须在 onMounted（Vue 3）或 mounted + $nextTick（Vue 2）中初始化。
Bootstrap CSS 和 JS 必须分开导入，顺序不能错
只 import bootstrap/dist/css/bootstrap.min.css 是没用的——样式能显示，但 Modal、Dropdown 这些交互组件全失效。报错常见为 ReferenceError: Popper is not defined 或 TypeError: bootstrap.Modal is not a constructor。
根本原因是 Bootstrap 5+ 的 JS 依赖 @popperjs/core 做定位，且其 ESM 导出方式不是默认导出对象。
-
@popperjs/core必须在bootstrap之前 import - CSS 导入可放最前，无顺序依赖
- 不要用
import bootstrap from 'bootstrap'，它返回的是命名导出对象，不是构造函数 - 要用
import { Modal, Tooltip } from 'bootstrap'或import * as bootstrap from 'bootstrap'
vite.config.js 需显式启用依赖预构建
Vite 默认不会自动处理 jQuery 插件或 CommonJS 风格的第三方库。如果你用了 bootstrap-datepicker 这类依赖 jQuery 的组件，不配 optimizeDeps.include 就会白屏或报 $ is not defined。
哪怕你只用原生 Bootstrap，也建议加上这个配置，避免 HMR 失效或热更新卡顿。
立即学习“前端免费学习笔记（深入）”；
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
- 在
vite.config.js中加入optimizeDeps: { include: ['bootstrap', '@popperjs/core'] } - 如果引入了
jquery，必须一并加进去：include: ['jquery', 'bootstrap', '@popperjs/core'] - 不加这行，首次启动可能正常，但改代码后 HMR 会漏掉 JS 初始化逻辑
图标和字体资源 404？别手动拷文件
Bootstrap 5 的 CSS 里有 url(../fonts/bootstrap-icons.woff2) 这类相对路径，Vite 不会自动解析 node_modules 里的资源引用，直接导致图标字体 404。
网上很多教程让你把字体文件复制进 public/，容易漏版本、路径错、上线后缓存不刷新——这是最常被忽略的部署陷阱。
- 正确做法是：安装
bootstrap-icons包，然后import 'bootstrap-icons/font/bootstrap-icons.css' - 这个 CSS 文件内联 SVG 图标，不依赖外部字体文件，零配置就能用
- 如果项目里混用了 Bootstrap 4 的图标类名（如
glyphicon），它们不会生效——Bootstrap 5 已移除 glyphicon，必须换用bi-*类名
Vue 项目里 new Modal() 报 null？DOM 没挂载就执行了
在 Vue 3 的 setup() 或 Vue 2 的 created() 钩子中直接调 new Modal(...)，几乎必报 null ——因为此时 DOM 节点还没渲染出来。
尤其当你把初始化逻辑写在组件顶层（非生命周期内），Vite 的 HMR 重载还会让实例重复创建，内存泄漏风险明显。
- Vue 3：必须放在
onMounted(() => { new Modal(...) }) - Vue 2：必须放在
mounted() { this.$nextTick(() => new Modal(...)) } - 如果 Modal 是动态插入的（比如通过
v-if控制），要监听元素存在后再初始化，不能只靠 mounted
复杂点在于：Bootstrap 的 JS 行为高度依赖 DOM 状态和执行时机，而 Vite 的模块加载、HMR 机制、以及 Vue 的响应式生命周期又各自有一套节奏。三者叠加时，最容易出问题的地方不是语法写错，而是“谁先动、谁等谁”。
