导入bootstrap/dist/js/bootstrap.js与import 'bootstrap'的差异及功能问题

一、两种导入方式的核心区别 #

• 第一种方式import 'bootstrap/dist/js/bootstrap.js'：直接导入Bootstrap的原始JS文件，但这个文件依赖Popper.js（Bootstrap 5+）或jQuery+Popper.js（Bootstrap 4及更早）才能运行Dropdown这类组件。如果项目没提前安装并引入这些依赖，组件所需的依赖项缺失，就会导致功能失效。
• 第二种方式import 'bootstrap'：导入的是Bootstrap包的入口文件（对应package.json里main字段指定的文件）。这个入口文件已经处理了依赖导入逻辑，会自动加载Popper.js等必需依赖，确保所有JS组件能正常初始化运行。

二、该问题是否为Vue特有？ #

不是。这本质是npm包的导入逻辑问题，和框架无关。不管是React、Angular项目，还是纯前端项目用webpack、vite这类构建工具，只要直接导入Bootstrap原始JS文件却不处理依赖，都会遇到组件失效的问题。

三、为何引入CSS的方式能正常生效？ #

Bootstrap的CSS文件是独立的静态样式文件，不依赖任何JS或第三方库，只要被构建工具正确解析并注入到页面中就能生效。不管是直接导入bootstrap/dist/css/bootstrap.css，还是通过import 'bootstrap'间接导入（若入口文件包含CSS导入），只要样式文件被正确加载，就能正常渲染样式。

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