前端

​

概览

Laravel 是一款后端框架，但也非常重视包括前端在内的整体开发体验。 在 Laravel 13 中，既可以使用以 PHP 为中心的方式，也可以借助 React、Vue、Svelte 等 JavaScript 框架来构建前端。 选择哪种方案，可以从下面 3 点考虑：

• 主要用 PHP 编写 UI
• 主要用 JavaScript / TypeScript 编写 UI
• 单一仓库完成，还是把 API 与 SPA 分离

​

以 PHP 为主

​

Blade

Blade 是 Laravel 标准的模板引擎。从控制器或路由返回视图，将服务器生成的 HTML 交给浏览器。 优点

• 与 Laravel 的路由、校验、认证等自然整合
• 只用 PHP 就能完成，学习成本低
• 与关注 SEO 或首屏渲染的页面契合度高

缺点

• 每次跳转或表单提交都容易造成整页刷新
• 复杂交互仍需 JavaScript 辅助

Blade 适用于后台管理、内部工具、以内容为中心的页面、以表单为主的应用。

​

Livewire

Laravel Livewire 在 Blade 之上提供了一种以 PHP 为主构建动态 UI 的方式。可以像 React 或 Vue 那样构建 modal、搜索、行内编辑等交互。 优点

• 可以在 PHP + Blade 的基础上构建动态 UI
• 与 Laravel 的状态管理和校验联动良好
• 想在特定位置引入 JavaScript 时，与 Alpine.js 组合得非常自然

缺点

• 复杂的客户端状态管理不如 JS 框架擅长
• 大型 SPA 前端职责较重时不一定合适

​

面向 PHP 的启动套件

Laravel 13 的启动套件提供了面向想以 PHP 为主构建动态 UI 团队的 Livewire 版本。仅用 Blade 也是可行的，但 PHP 优先的启动套件本身选用了 Livewire，并预置了认证、布局与 Vite 配置，能最快投入开发。

​

使用 JavaScript 框架

​

Inertia + React / Vue / Svelte

Inertia 是让你在保留 Laravel 路由、控制器与认证的同时，使用 React、Vue、Svelte 编写页面组件的桥梁。它不将 API 服务器与 SPA 完全分离，而是在同一个 Laravel 应用内实现现代化 UI。 优点

• 可以使用 React / Vue / Svelte 的组件模型
• 路由与认证仍在 Laravel 一侧
• 便于将后端与前端置于同一仓库中管理

缺点

• 比纯 Blade 需要学习更多东西
• 通常需要熟悉 Node.js 工具链与 TypeScript

Laravel 13 的官方启动套件里，React / Vue / Svelte + Inertia 都是开箱可选的。

​

API 与独立 SPA 分离

也可以让前端完全独立于 Laravel，由另一 SPA 或移动应用调用 API。适合多个客户端共享同一后端的场景。 此时 Laravel 主要承担：

• 提供 API 路由
• 认证与授权（如 Sanctum）
• JSON 响应整型（如 Eloquent API Resources）

优点

• 便于将同一后端服务用于 Web、移动、桌面等多类客户端
• 前端技术选型可以完全独立于 Laravel

缺点

• 认证、数据获取、部署都要分别设计
• 相较于单一 Laravel 应用会更复杂

​

面向 JavaScript 的启动套件

使用启动套件时，Inertia、React / Vue / Svelte、Tailwind CSS、Vite 都已预装。认证页面也已备齐，可以直接聚焦于 UI 开发。

​

使用 Vite 构建资源

无论选择哪种方案，Laravel 13 通常都使用 Vite 构建 CSS 与 JavaScript。Blade 和 Livewire 用它处理轻量脚本与样式；Inertia 则借助它构建整个前端。 Vite 的优势：

• 本地开发时快速的 HMR
• 生产资源的打包与版本化
• 与 Laravel @vite() 指令的原生集成

​

方案对比

​

下一步