Laravel如何与Inertia.js和Vue/React构建现代单页应用

admin 百科 2025-12-20 14

Laravel + Inertia.js 结合 Vue/React 可构建无需传统 API 的 SPA，通过控制器返回组件与数据，由 Inertia 在前端渲染，实现流畅单页体验。

Laravel如何与Inertia.js和Vue/React构建现代单页应用-第1张图片-佛山资讯网

使用 Laravel 与 Inertia.js 结合 Vue 或 React 是构建现代单页应用（SPA）的一种高效方式。它让 Laravel 负责后端逻辑和路由控制，同时通过 Inertia.js 将前端框架（Vue/React）无缝集成，无需编写传统的 API 接口，也能实现 SPA 的流畅体验。

1. Laravel + Inertia.js 的工作原理

Inertia.js 是一个适配器，连接服务端框架（如 Laravel）和前端 JavaScript 框架。它不依赖 REST API，而是通过控制器返回页面组件名和数据，Inertia 在客户端渲染对应 Vue 或 React 组件。

流程如下：

Laravel 控制器返回 Inertia::render('Page', $data)
Inertia 将组件名和数据发送到前端
前端根据组件名加载对应的 Vue/React 页面并渲染
页面跳转通过 Inertia Link 或 inertia.visit() 实现，避免整页刷新

2. 初始化项目环境

先创建 Laravel 项目并安装 Inertia 支持：

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

composer create-project laravel/laravel my-spa
cd my-spa
composer require inertiajs/inertia-laravel

登录后复制

发布 Inertia 视图资源：

php artisan inertia:install
</font>

登录后复制

这会生成 resources/js/app.js 和根视图 resources/views/app.blade.php。

3. 集成 Vue 或 React

以 Vue 3 为例：

npm install @inertiajs/vue3 vue@^3

登录后复制

配置 resources/js/app.js：

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
  resolve: name => require(`./Pages/${name}.vue`),
  setup({ el, App, props, plugin }) {
    const app = createApp({ render: () => h(App, props) })
    app.use(plugin)
    app.mount(el)
  },
})

登录后复制

若使用 React，替换为 @inertiajs/react 并调整入口文件结构即可。