Laravel 8 按流程配置Bootstrap后无法正常加载的问题咨询

修复步骤 #

1. 修正文件存放路径 #

Laravel 8 默认资源目录与app目录同级，为项目根目录下的resources/，请确认你的bootstrap.js、app.scss文件分别存放于resources/js/、resources/scss/路径下，你填写的app/resources/为错误路径，会导致webpack编译时找不到资源，生成的app.css、app.js为空。

2. 修正Popper依赖引用 #

你安装的是Bootstrap 5 配套的新版Popper依赖@popperjs/core，但代码中引入的是旧版包名popper.js，依赖不匹配会导致JS加载异常。修改resources/js/bootstrap.js代码为：

try {
    window.Popper = require('@popperjs/core').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

3. 执行资源编译命令 #

所有配置修改完成后，必须执行前端资源编译命令，才会生成可用的静态资源到public目录：

• 开发环境单次编译：npm run dev
• 开发环境监听文件变更自动编译：npm run watch
• 生产环境压缩编译：npm run prod

4. 视图文件完整引入资源 #

Bootstrap 交互功能依赖JS文件，你当前仅引入了CSS资源，需要补充引入JS，完整代码如下：

<link href="{{ asset('css/app.css')}}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>

<button type="button" class="btn btn-primary">Primary</button>

5. 缓存清理（可选） #

如果修改后仍不生效，清理Laravel视图缓存：

php artisan view:clear

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