Laravel视图引入/js/app.js后Bootstrap失效，如何解决？

嘿，这种情况我太熟悉了！引入app.js后Bootstrap罢工，基本上都是Bootstrap依赖的jQuery和Popper.js没被正确加载，或者加载顺序搞乱了导致的——毕竟Bootstrap的JS组件离不开这俩“小伙伴”。咱们一步步来搞定：

1. 先检查Laravel Mix的配置，把依赖绑好 #

打开项目根目录的webpack.mix.js，确保已经把jQuery和Popper.js配置成全局可用，这样Bootstrap才能找到它们：

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

// 自动注入jQuery和Popper到全局作用域
mix.autoload({
    jquery: ['$', 'window.jQuery', 'jQuery'],
    'popper.js': ['Popper', 'window.Popper']
});

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

这个配置会让Mix打包的时候把这俩依赖自动挂到全局，不用咱们手动在视图里引啦。

2. 确认Bootstrap样式已经通过Mix打包 #

打开resources/sass/app.scss，看看有没有导入Bootstrap的SCSS：

// 引入Bootstrap的样式文件
@import '~bootstrap/scss/bootstrap';

要是之前你是直接在视图里用CDN引Bootstrap样式，建议换成这种打包方式，能避免样式冲突。

3. 清理视图里重复的脚本引用 #

打开你的layouts/app.blade.php，把之前单独引的jQuery、Bootstrap JS这些都删掉，只留Mix打包好的app.css和app.js就行：

<!-- 放在<head>里加载样式 -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">

<!-- 放在</body>标签结束前加载脚本，保证DOM加载完再执行 -->
<script src="{{ asset('js/app.js') }}"></script>

划重点：绝对不能同时引多个版本的jQuery或者Bootstrap JS，不然肯定会打架！

4. 重新编译资源，让配置生效 #

在终端里跑编译命令，把新的配置打包到资源文件里：

# 开发环境用这个，改代码会自动刷新
npm run watch

# 上线前用这个，会压缩优化文件
npm run prod

编译完刷新页面，你那个轮播组件应该就能正常切换了，其他Bootstrap样式也能正常显示啦。

要是还不行，查控制台报错 #

打开浏览器F12看控制台，如果出现$ is not defined或者Popper is not defined，那就是依赖没注入成功，回去检查第一步的autoload配置有没有写错。另外也看看Vue组件里有没有不小心覆盖了$这些全局变量，比如别在Vue里重新定义$哦。

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