Laravel安装Bootstrap脚手架后页面加载白闪如何解决

中途执行php artisan ui bootstrap出现页面跳转白闪是该脚手架的典型问题，它会在无任何覆盖提示的情况下直接修改3处核心前端文件，和业务代码冲突无关：

• 覆盖resources/css/app.css，清空文件内原有的所有全局样式规则，仅保留一行Bootstrap引入代码
• 覆盖resources/js/app.js，重置文件内原有的所有全局JS逻辑，默认引入Bootstrap JS bundle以及冗余的页面加载拦截逻辑
• 如果你的项目使用默认路径resources/views/layouts/app.blade.php作为公共布局，脚手架会直接覆盖该布局文件，把你之前写的全局meta标签、资源预加载逻辑全部替换为脚手架自带的默认模板内容
  你观察到的白屏闪烁本质是FOUC（无样式内容闪烁）：页面跳转时浏览器会先渲染还没加载CSS的纯HTML，默认背景为纯白色，等数百毫秒后CSS资源加载完成才渲染正常页面样式；如果你之前给body设置了非白色的背景色，样式被覆盖后加载初期的白底和实际页面的色差会让闪烁感格外明显。

按以下顺序操作即可完全修复：

1. 校正布局文件的资源加载顺序
   打开resources/views/layouts/目录下所有公共布局blade文件，检查head标签内的资源引入位置，确保CSS、JS的引入标签放在head标签靠前位置，紧邻meta标签，不要放到body底部，也不要给资源标签加async/defer属性：

   <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>@yield('title')</title>
       {{-- 资源引入必须放在head内，不要挪到body末尾 --}}
       @vite(['resources/css/app.css', 'resources/js/app.js'])
   </head>
   

2. 补全被覆盖的入口文件内容
   打开resources/css/app.css，保留脚手架默认写入的Bootstrap引入行，把你之前写的所有全局样式规则补回文件内，尤其要补全body标签的基础样式，从根源消除白屏的颜色差：

   /* 脚手架默认写入的Bootstrap引入，无需删除 */
   @import 'bootstrap';
   
   /* 补全你之前写的所有全局样式，例： */
   body {
       background-color: #f5f7fa; /* 替换为你项目实际的页面背景色 */
       margin: 0;
       font-family: 'Microsoft Yahei', sans-serif;
   }
   /* 其余原有自定义样式全部补到这里 */
   

   打开resources/js/app.js，保留脚手架默认写入的Bootstrap引入行，把你之前写的全局JS逻辑（比如表单验证、全局事件监听、组件注册等）全部补回即可，删掉脚手架默认带的页面loading遮罩相关冗余代码。
3. 重新编译前端资源
   在项目根目录执行以下命令，重新安装前端依赖并编译生产环境资源：

   npm install
   npm run build
   

   本地开发调试时可以直接启动Vite热更新服务，不用反复执行build：

   npm run dev
   

4. 清除Laravel缓存
   执行以下artisan命令清除模板编译缓存和应用缓存，避免旧的缓存文件持续生效：

   php artisan view:clear
   php artisan cache:clear
   

给已有Laravel项目新增Bootstrap时，不需要执行php artisan ui bootstrap命令，直接手动在resources/css/app.css中加入@import 'bootstrap'、在resources/js/app.js中引入Bootstrap的JS模块即可，不会覆盖已有代码。

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