CSS 使用 Blade 和 Vue 在 Laravel 应用程序上加载缓慢并导致临时奇怪的格式

Question

我有一个 Laravel 应用程序，它在 blade 模板中使用了一小段 Vue 代码。从一个视图导航到另一个视图时出现问题，几乎每次在加载 CSS 之前都会有短暂的延迟，页面的原始文本显示时没有任何格式。它显示大约 1/2 秒，然后 CSS 开始显示，看起来是正确的。我找不到任何原因，我尝试更改 mix('css/app.css') 等，这样它就不必每次都重新加载，但我不知道如何修复它。

我不确定 Vue 是否以某种方式延迟了 css 的加载？任何想法可能是什么？我将在下方粘贴 blade 模板的顶部部分。我刚刚升级到 Laravel 8，但 Laravel 7.

也发生了同样的情况

感谢您的帮助！

<!doctype html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="title" content="Pono Admin">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Admin</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;700&display=swap" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
    <link href="{{ mix('css/admin.css') }}" rel="stylesheet">
    @hasSection('style')
        @yield('style')
    @endif

    <!-- Scripts -->
    @hasSection('script')
        @yield('script')
    @else
        <script>
            var vmMixinsAdmin = '';
        </script>
    @endif
    <script src="{{ mix('/js/app.js') }}" defer></script>
    <script>
        var vmMixinsApp = '';
        let vroundedBtn = false;
        let vunreadNotificationCount = {{ auth()->user()->unreadNotifications()->count() }};
    </script>
</head>

<body>

    <div id="vm">

        <main id="app-main" class="container-fluid px-0">

        etc

Answer 1

有人有类似的想法并决定在前景上显示叠加层并在页面加载后隐藏它。我不确定这是最好的解决方案，但它可以帮助：

Force browsers to load CSS before showing the page

CSS 使用 Blade 和 Vue 在 Laravel 应用程序上加载缓慢并导致临时奇怪的格式

CSS loading slow and causing temporary weird formatting on Laravel app with Blade and Vue

laravel

vue.js

laravel-blade