Laravel5.5+Vuejs2项目集成Bootstrap4后汉堡菜单失效求助

我之前也碰到过一模一样的坑！咱们一步步排查，把这个问题解决掉：

1. 先确认依赖安装是否完整 #

Bootstrap 4的JS组件必须依赖jQuery和Popper.js，而且得是适配Bootstrap 4的版本，别装错成Bootstrap 5用的@popperjs/core。先执行安装命令：

npm install jquery popper.js bootstrap --save-dev

2. 配置Laravel Mix的依赖加载顺序 #

这是最容易踩坑的地方！打开webpack.mix.js，要把jQuery和Popper全局注入到项目中，确保Bootstrap能找到它们：

const mix = require('laravel-mix');

// 全局注入jQuery和Popper，让它们在window对象上可用
mix.autoload({
    jquery: ['$', 'window.jQuery', 'jQuery'],
    'popper.js/dist/umd/popper.js': ['Popper']
});

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

3. 调整app.js的引入顺序 #

打开resources/assets/js/app.js，严格按照「jQuery → Popper → Bootstrap → Vue」的顺序引入，确保Bootstrap初始化时依赖都已就绪：

// 先挂载全局的jQuery和Popper（Mix的autoload已经帮我们做了，但手动写一遍更保险）
window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default;

// 引入Bootstrap的JS组件
require('bootstrap');

// 最后初始化Vue
const app = new Vue({
    el: '#app'
});

4. 重新编译并清理缓存 #

旧的编译文件可能会干扰，执行编译命令：

# 开发环境用
npm run dev
# 生产环境用
npm run prod

然后清空浏览器缓存（按Ctrl+Shift+R强制刷新），再测试移动端菜单。

5. 检查HTML结构是否符合Bootstrap规范 #

汉堡菜单的HTML必须严格对应属性，不然点击按钮找不到要折叠的容器：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <!-- 汉堡按钮的data-toggle和data-target必须对应折叠容器的id -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- 折叠容器的id要和按钮的data-target一致 -->
  <div class="collapse navbar-collapse" id="navbarMenu">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">首页</a>
      </li>
      <!-- 其他菜单项 -->
    </ul>
  </div>
</nav>

6. 排查控制台报错 #

如果上面都做了还是不行，打开浏览器控制台（F12）看有没有报错：

• 要是出现$ is not defined或Popper is not defined：说明依赖没加载到位，回头检查Mix配置和app.js的引入顺序
• 要是有其他JS报错：比如Vue相关的错误，看看是不是Vue代码阻止了事件冒泡，或者导航栏被Vue容器包裹后出现了冲突（可以临时把导航栏移到#app外面测试）

我当时就是因为没配置Mix的autoload，导致Bootstrap找不到jQuery，汉堡菜单完全没反应，按上面的步骤来应该就能解决！

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