Laravel 9+Vue3+Inertia在iPhone真机显示空白页求助

问题现象 #

• PC端运行完全正常，iPhone真机打开应用时显示空白页，无任何控制台日志
• 浏览器开发者工具切换到移动端模式时运行正常，但多款iPhone真机浏览器测试均无法正常显示
• 渲染Blade视图时功能正常，仅渲染Inertia组件时出现空白页问题
• 无法确定问题出自@inertiajs/inertia-vue3还是inertiajs/inertia-laravel

版本信息 #

• inertiajs/inertia-laravel：0.6.3
• @inertiajs/inertia：0.11.0
• @inertiajs/inertia-vue3：0.6.0

相关代码 #

web.php #

Route::get('/', function() {
        return Inertia::render('WelcomeView');
    });

app.js #

import './bootstrap';

import '../css/main.css'

import { createPinia } from 'pinia'
import { useStyleStore } from '@/Stores/style.js'

import { darkModeKey } from '@/config.js'

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import { InertiaProgress } from '@inertiajs/progress'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m'
import Notifications from 'notiwind'
import * as ConfirmDialog from 'vuejs-confirm-dialog'

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

const pinia = createPinia()

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(pinia)
            .use(Notifications)
            .use(ConfirmDialog)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
});

InertiaProgress.init({ 
        color: '#5136a8',
        showSpinner:true 
    })

const styleStore = useStyleStore(pinia)

/* App style */
//styleStore.setStyle(localStorage[styleKey] ?? 'basic')
styleStore.setStyle()
/* Dark mode */
if ((!localStorage[darkModeKey] && window.matchMedia('(prefers-color-scheme: dark)').matches) || localStorage[darkModeKey] === '1') {
  styleStore.setDarkMode(true)
}

WelcomeView.vue（Pages目录下） #

<template>
<div>
   hellow world
</div>
</template>

app.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>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
      
        <!-- Scripts -->
        @routes
        @vite('resources/js/app.js')
        @inertiaHead
    </head>
    <body class="font-sans antialiased">
        @inertia
    </body>    
</html>

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