Laravel 11 中如何集成Vue 3与Inertia.js-php教程-PHP中文网

Inertia::render() 返回空白页或404的主因是中间件未注册、根模板缺失或Vue路径不匹配；需手动启用HandleInertiaRequests中间件、创建极简app.blade.php、确保resolve路径大小写精确。

laravel 11 中如何集成vue 3与inertia.js

Inertia::render() 返回空白页或 404，基本就是中间件没挂上、根模板缺失、或前端 resolve 路径对不上——Laravel 11 没自动帮你做这些，得手动补全。

Laravel 11 默认仍不自动注册 HandleInertiaRequests 中间件。即使你运行过 php artisan inertia:install，它也只生成配置和模板，不会改 app/Http/Kernel.php。

打开 app/Http/Kernel.php，检查 $middlewareGroups['web'] 数组是否包含 \App\Http\Middleware\HandleInertiaRequests::class
若缺失，手动添加（位置建议在 \App\Http\Middleware\EncryptCookies::class 之后、\Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class 之前）
确保路由明确使用 web 中间件组：比如 Route::get('/', [HomeController::class, 'index'])->middleware('web')（资源路由默认已带，但闭包路由不会）

Laravel 11 不再自动生成 resources/views/app.blade.php，php artisan inertia:install 命令也只创建空文件或跳过——你必须自己建，并严格保持结构极简。

Laravel 11 + Vite 默认用 resources/js/Pages/ 存放页面组件，但 createInertiaApp() 的 resolve 函数若写错路径，就会静默失败（控制台无报错，页面空白）。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

标准写法是：resolve: name => require(`./Pages/${name}.vue`)（注意 .vue 后缀不可省）
组件名区分大小写：控制器调用 Inertia::render('Dashboard') → 对应 resources/js/Pages/Dashboard.vue，不是 dashboard.vue 或 DashboardPage.vue
嵌套路径需完整：如 Inertia::render('Users/Index') → 必须是 resources/js/Pages/Users/Index.vue，不能漏掉 Users/ 目录
若用 TypeScript 或自定义别名（如 @/Pages），Vite 别名配置必须同步更新，否则 require() 找不到模块

这是最容易忽略的逻辑断点：Inertia 表单拦截依赖服务端返回的 303 See Other 响应头 + 新页面 props，而 Laravel 默认 redirect() 会返回 302 并跳转到 Blade 视图。

登录、创建、编辑等操作成功后，控制器必须返回 Inertia::render('TargetPage', [...])，而不是 redirect()->route('target')
验证失败时，Laravel 自动抛出 ValidationException，Inertia 会捕获并注入 errors 到页面 props，前端用 usePage().props.errors 拿即可
若你手动调用 back()->withErrors(...)，Inertia 无法识别，会导致页面刷新或白屏

最常卡住的地方其实是中间件和根模板——它们不报错、不提示，只沉默地让整个流程失效。跑通前两步（中间件注册 + @inertia 模板），再核对一次 resolve 路径大小写，90% 的“空白页”问题就解决了。