Laravel集成Vue+Vite后Bootstrap 5下拉菜单失效求助

Bootstrap 5 的下拉菜单依赖其 JS 插件才能正常工作，用 Vite 整合后失效，大概率是 JS 初始化环节出了问题，按以下步骤排查修复：

1. 确保 app.js 正确导入 Bootstrap JS #

打开 resources/js/app.js，确认已导入并初始化 Bootstrap 的 JavaScript 模块：

// 导入 Bootstrap 样式和核心 JS
import 'bootstrap/dist/css/bootstrap.css';
import * as bootstrap from 'bootstrap';

// 全局暴露 bootstrap 对象（可选，方便手动调用）
window.bootstrap = bootstrap;

2. 排查重复引入冲突 #

检查页面模板，确保没有通过传统 <script>/<link> 标签重复引入 Bootstrap 的 CSS 或 JS。重复加载会导致插件初始化混乱，直接引发交互失效。

3. 动态渲染内容的手动初始化 #

如果下拉菜单是 Vue 动态渲染的（比如在组件模板里），Bootstrap 的自动初始化可能无法覆盖到这类异步生成的 DOM，此时需要在 Vue 组件的 mounted 钩子中手动初始化：

mounted() {
  this.$nextTick(() => {
    // 初始化当前组件内的所有下拉组件
    this.$el.querySelectorAll('[data-bs-toggle="dropdown"]').forEach(el => {
      new bootstrap.Dropdown(el);
    });
  });
}

4. 检查 Vite 配置正确性 #

确认 vite.config.js 配置无误，确保 Laravel 和 Vue 插件正常加载：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.js'],
      refresh: true,
    }),
    vue({
      template: {
        transformAssetUrls: {
          base: null,
          includeAbsolute: false,
        },
      },
    }),
  ],
});

5. 清理缓存重新构建 #

执行以下命令清除缓存并重新打包资源，避免旧缓存导致的异常：

npm run build
php artisan view:clear
php artisan cache:clear

做完以上步骤后，重启开发服务器（npm run dev）或部署生产构建，下拉菜单应该就能正常触发了。

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