讲师中心 微信公众号

工具推荐

视频效率加速
剧云
剧云

中文短剧剧本制作平台

Laper
Laper

剧本策划到成片协作

updream

一键生成高质量推广成片

立刻MV
立刻MV

低成本歌曲 MV、视频生成

Laravel 11 中如何集成Vue 3与Inertia.js

浅瑶君_8659

浅瑶君_8659

发布时间:2026-05-19 10:48:00

|

920人浏览过

|

来源于php中文网

原创

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

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

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

确认 HandleInertiaRequests 中间件已启用

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')(资源路由默认已带,但闭包路由不会)

检查 app.blade.php 是否存在且仅含 @inertia

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

  • 路径必须是 resources/views/app.blade.php
  • 内容只需包含 @inertia 指令,**不能有额外 HTML 标签、script 或 link**(Vite 会自动注入)
  • 若你用了自定义布局(如继承 layouts.app),Inertia 将无法接管,直接返回空白
  • 验证方式:访问任意 Inertia 路由,查看页面源码,应能看到 id="app" 容器及内联的 window.Inertia 初始化数据

Vue 3 入口文件中 resolve 路径必须匹配组件实际位置

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

Element Plus UI Vue3
Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用,使用 Element Plus 组件(如 el-button、el-input、el-form、el-table 等)。

下载

立即学习“前端免费学习笔记(深入)”;

  • 标准写法是: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() 找不到模块

表单提交后控制器不能用 redirect(),必须返回 Inertia 响应

这是最容易忽略的逻辑断点: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% 的“空白页”问题就解决了。

热门AI工具

更多
UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
laravel组件介绍
laravel组件介绍

laravel 提供了丰富的组件,包括身份验证、模板引擎、缓存、命令行工具、数据库交互、对象关系映射器、事件处理、文件操作、电子邮件发送、队列管理和数据验证。想了解更多laravel的相关内容,可以阅读本专题下面的文章。

897

2024.04.09

laravel中间件介绍
laravel中间件介绍

laravel 中间件分为五种类型:全局、路由、组、终止和自定。想了解更多laravel中间件的相关内容,可以阅读本专题下面的文章。

875

2024.04.09

laravel使用的设计模式有哪些
laravel使用的设计模式有哪些

laravel使用的设计模式有:1、单例模式;2、工厂方法模式;3、建造者模式;4、适配器模式;5、装饰器模式;6、策略模式;7、观察者模式。想了解更多laravel的相关内容,可以阅读本专题下面的文章。

2528

2024.04.09

thinkphp和laravel哪个简单
thinkphp和laravel哪个简单

对于初学者来说,laravel 的入门门槛较低,更易上手,原因包括:1. 更简单的安装和配置;2. 丰富的文档和社区支持;3. 简洁易懂的语法和 api;4. 平缓的学习曲线。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

4861

2024.04.10

laravel入门教程
laravel入门教程

本专题整合了laravel入门教程,想了解更多详细内容,请阅读专题下面的文章。

7130

2025.08.05

laravel实战教程
laravel实战教程

本专题整合了laravel实战教程,阅读专题下面的文章了解更多详细内容。

4676

2025.08.05

laravel面试题
laravel面试题

本专题整合了laravel面试题相关内容,阅读专题下面的文章了解更多详细内容。

8789

2025.08.05

PHP高性能API设计与Laravel服务架构实践
PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开,重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景,深入分析性能瓶颈定位与优化思路,帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

1516

2026.03.04

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

40

2026.11.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
如何安装 Composer
如何安装 Composer

共1课时 | 224人学习

Composer手册
Composer手册

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn