Inertia.js + Laravel 在移动设备上重新调整空白页面

Question

最近我一直在使用 Inertia.js 开发 Laravel + React 应用程序；在我的电脑上一切都运行良好，并且当我服务于我的网络（192.168.x.x）时仍然运行良好，但是当我在手机上访问该应用程序时，页面是空的。一个简单的白屏。使用 Firefox 开发者版本（在 Android 上称为 Firefox Nightly）和名为 Mobile DevTools 的扩展，我发现布局页面（app.blade.php）已加载，但组件未渲染。

另外，在我的电脑上，转到开发工具上的网络选项卡，单击加载页面的请求，然后转到响应选项卡，我看到，在电脑上，响应也是空白的，但组件仍然加载。我要附上一些照片，这样我刚才说的就更清楚了（请原谅我的英语，我来自外国）

app.blade.php:

<!DOCTYPE html>
<html lang="{{ auth()->check() ? json_decode(auth()->user()->settings)->lang : "en"}}" class={{ auth()->check() ? json_decode(auth()->user()->settings)->theme : "dark"}}>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title inertia>{{ env('APP_NAME', 'Laravel') }}</title>
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <!-- Scripts -->
        @routes
        @viteReactRefresh
        @vite(['resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"])
        @inertiaHead
    </head>
    <body class="font-sans antialiased bg-neutral-200 dark:bg-slate-900">
        @inertia
    </body>
</html>

Inertia是通过laravel/breeze安装的我已经尝试过

npm run build

，但我没有

npm run watch

作为 npm 命令。

Answer 1

@speed 你找到这个问题的解决方案了吗？

Inertia.js + Laravel 在移动设备上重新调整空白页面

问题描述投票：0回答：1

1个回答

最新问题

Inertia.js + Laravel 在移动设备上重新调整空白页面

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1