为什么使用 AdminLTE 打开的页面看起来坏了？

Question

我在 laravel 9 中创建网站 Inertiajs/vuejs 3 基于 https://github.com/ColorlibHQ/AdminLTE 3（暗模式）。我删除了所有 jquery 并仅使用 vuejs。它可以正常工作，但是当我打开网站时看起来坏了，好像没有加载所有样式，

请尝试通过url登录管理区：

https://bi-currencies.my-demo-apps.tk/admin/currencies

凭据在登录表单中

页面看起来像：https://prnt.sc/TCjBh0SefUMO 4

但是如果用“CTRL+R”刷新页面看起来没问题，在深色模式下。

知道为什么会这样以及如何解决这个问题吗？

更多详情： Adminare 基于 https://github.com/ColorlibHQ/AdminLTE 模板（带有“bootstrap”：“^4.6.0”）。前端基于自定义 https://technext.github.io/space/v1.0.0/ 模板（使用 Bootstrap v5.0.1）

当我从管理区域切换时，我遇到了同样的设计问题前端页面 https://bi-currencies.my-demo-apps.tk/home

我的 Kubuntu 20 的其他浏览器也有这个问题。

也许问题是我使用了太多不同的模板，但实际上我使用了不同的布局，所以在

app/Http/Middleware/HandleInertiaRequests.php :

    public function rootView(Request $request)
    {
        if ($request->segment(1) == 'user') {
            return 'layouts/user';
        }
        if ($request->segment(1) == 'admin') {
            return 'layouts/adminlte'; // TODO
        }

        return 'layouts/frontend'; // Current request is front-end
    }

该项目没有安装Redis或其他chache工具。当然，我清除了打开网站的所有缓存。还有其他想法吗？前端模板 resources/views/layouts/frontend.blade.php :

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title inertia id="app_title">{{ config('app.name', 'Laravel') }}</title>

    <link rel="shortcut icon" type="image/x-icon" href="/images/frontend_favicon.ico">

    <link href="https://fonts.googleapis.com/css2?family=Yantramanav:wght@300;400;500;700;900&amp;display=swap"
          rel="stylesheet">

    <!-- Styles -->


    @routes

    <!-- Scripts -->

    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link rel="stylesheet" href="/css/theme.css">

    <script src="/vendors/@popperjs/popper.min.js"></script>
    <script src="/vendors/bootstrap/bootstrap.min.js"></script>
    <script src="/vendors/is/is.min.js"></script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=window.scroll"></script>
    <script src="/vendors/fontawesome/all.min.js"></script>

    <script src="{{ mix('js/app.js') }}" defer></script>

</head>
<body class="bg-light sidebar-mini layout-fixed layout-footer-fixed">
@inertia
</body>
</html>

和管理模板 resources/views/layouts/adminlte.blade.php :

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title inertia id="app_title">{{ config('app.name', 'Laravel') }}</title>

        <!-- Google Font: Source Sans Pro -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">

        <!-- Styles -->

        <link rel="stylesheet" href="/css/OverlayScrollbars.min.css">
        <link rel="stylesheet" href="/css/fontawesome_all.min.css">

        <link rel="stylesheet" href="/css/adminlte.min.css">
        <link rel="stylesheet" href="/css/admin_custom.css">

        @routes

        <!-- Scripts -->
        <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

        <script src="/js/Chart.bundle.js"></script>

        <script src="/js/OverlayScrollbars.min.js"></script>

        <script src="{{ mix('js/app.js') }}" defer></script>
    </head>
    <body class="bg-light sidebar-mini layout-fixed layout-footer-fixed">
        @inertia
    </body>
</html>

1 个常见 resources/js/app.js :

require('./bootstrap');

window.Toast = Swal.mixin({
    toast: true,
    position: 'top-end',
    showConfirmButton: false,
    timer: 3000,
    timerProgressBar: false,
    didOpen: (toast) => {
        toast.addEventListener('mouseenter', Swal.stopTimer)
        toast.addEventListener('mouseleave', Swal.resumeTimer)
    }
})

require('@fortawesome/fontawesome-free/js/all.min.js');

// Import modules...
import { createApp, h } from 'vue';
import { createInertiaApp, Link } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';

import mitt from 'mitt';
window.emitter = mitt();


const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

import Multiselect from '@vueform/multiselect'

import VueUploadComponent from 'vue-upload-component'
import Paginate from "vuejs-paginate-next";


const app =  createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .component('inertia-link', Link)
            .component('Paginate', Paginate)
            .component('file-upload', VueUploadComponent)

            .mixin({ methods: { route } })
            .component('multiselect', Multiselect)
            .mount(el);
    },
});

InertiaProgress.init({ color: '#4B5563' });

同样在 admin/settings 页面我添加了“清除缓存”按钮，点击它下一个命令是运行 :

\Artisan::call('config:cache');
\Artisan::call('route:cache');
\Artisan::call('cache:clear');
\Artisan::call('route:cache');
\Artisan::call('route:clear');
\Artisan::call('view:clear');
\Artisan::call('clear-compiled');

但是清除缓存对解决这个问题没有帮助。
难道这个问题的原因是我有 1 个共同的 resources/js/app.js 用于管理区域和前端部分？

谢谢！

Answer 1

有一次我遇到了同样的惯性问题，这对我很有用。这通常发生在您使用 multiple-layouts 时，以及那些布局有不同的 style-scripts.

原因（问题）：

因为您为 frontend-pages (public pages) 使用了一种布局，为 admin-pages 使用了另一种布局。

因此，当用户访问 front-pages 时，frontend-layout 的所有样式脚本都已加载，并且工作正常并且看起来不错。

但是，当用户切换到 admin-layout 时，布局 style-scripts 未加载。因此，在 hard-refresh (Crtl+R) URL 上加载了适当的布局 style-scripts。

我阅读了很多关于在 run-time 上切换布局的文章，每篇文章都提供了与您在 HandleInertiaRequests.php 中所做的相同的解决方案。

解决方案：

然后我到了一个点，我需要在点击某些 link 时切换布局我做了 hard-loading，如下面的代码片段所示 而不是 重定向 inertia-link:

<a :href="route('home')">
   Home                           
</a>

通过这种方式加载了适当的布局 style-script。

我的假设：

此外，我看到你的 site-source-code (Ctrl+U)，如屏幕截图所示。您还没有通过 Laravel asset() 辅助方法加载 style-scripts。

我建议通过 Laravel 标准方法 （使用 asset() 方法将 scripts & style link 加载到 blade 文件中尝试一次) 这可能是个问题。

附上CSSsheet

  <link href="{{ asset('frontend/css/bootstrap.min.css') }}" rel="stylesheet">

附加 JavaScript/jQuery 脚本

<script src="{{ asset('frontend/js/jquery-3.5.1.min.js') }}"></script>

使用 asset() 方法后，您的链接在 site-source-code (Ctrl+U) 看起来像这样：

注：

确保您必须在 .env 文件中设置适当的 APP_URL。

为什么使用 AdminLTE 打开的页面看起来坏了？

Why opened page with AdminLTE looks broken?

css

laravel

vue.js

原因（问题）：

解决方案：

我的假设：

注：