Laravel 9/10侧边栏导航UI失效问题排查（原Laravel 5代码可用）

一、排查资源加载问题 #

Laravel 9/10默认用Vite替代了旧版Mix，资源引入逻辑变化是核心原因：

• 若直接使用本地AdminLTE资源：确认css/js文件存放在public/adminlte/目录下，blade中引入路径需正确，示例写法：

  <link rel="stylesheet" href="{{ asset('adminlte/css/AdminLTE.min.css') }}">
  <link rel="stylesheet" href="{{ asset('adminlte/css/skins/_all-skins.min.css') }}">
  <script src="{{ asset('adminlte/js/adminlte.min.js') }}"></script>
  

• 若使用laravel-adminlte包：先更新到适配Laravel 9/10的版本，执行：

  composer require jeroennoten/laravel-adminlte:"^3.0"
  php artisan adminlte:install
  

  之后可通过@extends('adminlte::page')继承框架布局，或手动引入生成的资源文件。

二、修复HTML结构完整性 #

AdminLTE侧边栏依赖特定DOM类名与嵌套结构，对比旧版Laravel 5模板，确保核心结构不缺失：

<div class="wrapper">
  <!-- 侧边栏容器 -->
  <aside class="main-sidebar">
    <section class="sidebar">
      <!-- 可选：用户信息模块 -->
      <div class="user-panel">
        <div class="pull-left image">
          <img src="{{ asset('img/user-avatar.jpg') }}" class="img-circle" alt="User Avatar">
        </div>
        <div class="pull-left info">
          <p>Your Name</p>
          <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
        </div>
      </div>
      <!-- 侧边栏菜单核心 -->
      <ul class="sidebar-menu" data-widget="tree">
        <li class="header">MAIN NAVIGATION</li>
        <li class="active treeview">
          <a href="#">
            <i class="fa fa-dashboard"></i> <span>Dashboard</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li class="active"><a href="{{ route('dashboard') }}"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
          </ul>
        </li>
        <!-- 其他菜单项示例 -->
        <li><a href="{{ route('users.index') }}"><i class="fa fa-users"></i> <span>Users</span></a></li>
      </ul>
    </section>
  </aside>
  <!-- 内容区域 -->
  <div class="content-wrapper">
    @yield('content')
  </div>
</div>

重点检查：main-sidebar、sidebar、sidebar-menu、treeview这些核心类名是否存在，嵌套层级是否正确。

三、清理缓存并重新编译资源 #

• 清除Laravel视图与应用缓存：

  php artisan view:clear
  php artisan cache:clear
  

• 若用Vite编译资源，开发环境运行：

  npm run dev
  

  生产环境执行：

  npm run build
  

  确保blade中通过@vite(['resources/css/app.css', 'resources/js/app.js'])引入编译后的资源（若AdminLTE资源已整合到Vite入口文件）。

四、验证浏览器控制台错误 #

打开浏览器开发者工具（F12）的Console面板，查看是否有404资源错误或JS报错，针对性修复路径或依赖问题。

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