Vue.js 3项目导入Bootstrap 5后CSS正常但JS功能失效如何解决

你仅完成了Bootstrap 5的样式导入，没有引入Bootstrap 5的JS模块，同时缺少Bootstrap交互功能必需的@popperjs/core依赖，因此导航折叠、下拉菜单等JS控制的功能全部无法生效。

1. 安装Popper.js依赖
   执行以下命令安装Bootstrap 5必需的依赖库：

npm install @popperjs/core

2. 全局导入Bootstrap JS模块
   在你的main.js文件中添加Bootstrap JS的导入语句，修改后的完整代码如下：

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
// 导入Bootstrap 5全量JS模块
import 'bootstrap'

createApp(App).use(store).use(router).mount("#app");

如果需要减小打包体积，也可以按需导入你实际用到的交互模块，示例如下：

// 仅导入折叠、下拉菜单两个模块
import 'bootstrap/js/dist/collapse'
import 'bootstrap/js/dist/dropdown'

配置完成后重启本地开发服务，所有Bootstrap原生交互功能即可正常运行，无需修改原有样式导入逻辑和index.html文件。

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