Laravel如何集成Inertia.js与Vue/React？（安装配置）

Laravel 集成 Inertia.js 的核心是服务端用 Inertia::render() 返回组件，前端用 @inertiajs/vue3 或 @inertiajs/react 接管导航；需安装适配器、配置 HandleInertiaRequests 中间件、创建 app.blade.php 根模板，并在控制器中返回 Inertia 响应。

在 Laravel 中集成 Inertia.js，核心是让服务端能响应 Inertia 请求并返回页面组件，同时前端通过 Inertia 的客户端接管常规跳转和表单提交。它不替换 Laravel 的路由和控制器逻辑，而是“包裹”原有流程——后端仍用 Blade 渲染逻辑（但实际不返回 HTML），前端用 Vue 或 React 渲染页面。

1. 安装 Inertia 服务端支持（Laravel）

使用 Composer 安装官方适配器：

• Vue 项目：运行 composer require inertiajs/inertia-laravel
• React 项目：同样安装该包（服务端适配器通用，与前端框架无关）

发布配置文件（可选但推荐）：php artisan vendor:publish --provider="Inertia\ServiceProvider"，会生成 config/inertia.php，可自定义页面组件根路径、SSR 配置等。

2. 配置中间件与根布局

Inertia 要求所有 Inertia 请求都经过 InertiaInertia 中间件处理。Laravel 10+ 默认已注册 HandleInertiaRequests 中间件（位于 app/Http/Middleware/HandleInertiaRequests.php），确保它被应用到 web 路由组：

立即学习“前端免费学习笔记（深入）”；

• 检查 app/Providers/RouteServiceProvider.php 中是否在 withMiddleware 方法里调用了 $middleware->group('web', ...)
• 确认 app/Http/Kernel.php 的 $middlewareGroups['web'] 包含 AppHttpMiddlewareHandleInertiaRequests::class

该中间件负责注入共享数据（如认证用户）、设置页面标题、处理 SSR 等。默认根模板是 resources/views/app.blade.php，需手动创建，内容只需一个空的 <p id="app"></p> 和加载前端资源的 script 标签（后续由 Vite/Webpack 注入）。

标签： php vue react laravel html js 前端 json composer vue3 vite npm