使用 Laravel + Inertia.js + Vue 可快速构建 SPA。1. 创建 Laravel 项目并安装 inertiajs/inertia-laravel；2. 安装 vue@next 与 @inertiajs/inertia-vue3，配置 resources/js/app.js 初始化 Inertia 与 Vue；3. 创建 Vue 页面组件于 resources/js/Pages/；4. 在 web.php 中使用 Inertia::render() 返回页面；5. 配置 vite.config.js 并通过 @vite 引入资源；6. 运行 php artisan serve 启动服务，实现无刷新路由跳转。
使用 Laravel 结合 Inertia.js 和 Vue 构建单页应用（SPA），可以让你在不编写 API 路由的情况下，享受前后端无缝衔接的开发体验。Inertia.js 的核心作用是桥接后端框架（如 Laravel）与前端 JavaScript 框架（如 Vue），无需传统 REST API 即可渲染 Vue 页面。以下是具体实现方法。
1. 环境准备与项目初始化
确保已安装 Laravel 并创建好项目：
composer create-project laravel/laravel inertia-app
cd inertia-app
接着安装 Inertia 服务端支持包：
composer require inertiajs/inertia-laravel
2. 安装并配置前端依赖（Vue + Inertia）
进入项目根目录，使用 npm 安装 Vue 和 Inertia 相关包：
立即学习“前端免费学习笔记（深入）”；
npm install vue@next @inertiajs/inertia @inertiajs/inertia-vue3
创建前端入口文件。在 resources/js/app.js 中初始化 Inertia 和 Vue：
import { createApp, h } from ‘vue’
import { createInertiaApp } from ‘@inertiajs/inertia-vue3’
import { InertiaProgress } from ‘@inertiajs/progress’
createInertiaApp({
resolve: name => require(`./Pages/${name}.vue`),
setup({ el, App, props }) {
createApp({ render: () => h(App, props) }).mount(el)
}
})
// 显示页面切换进度条
InertiaProgress.init()
然后创建一个根模板文件：resources/views/app.blade.php
@inertia
注意：@inertia 指令会自动注入 Inertia 应用容器和初始页面数据。
3. 创建 Vue 页面组件
在 resources/js/Pages/ 目录下创建 Vue 页面，例如 Home.vue：
欢迎使用 Inertia + Vue 单页应用
前往关于页
export default {
name: ‘Home’
}
再创建 About.vue：
关于页面
返回首页
4. 配置 Laravel 路由返回 Inertia 页面
修改 routes/web.php，使用 Inertia::render() 返回 Vue 页面：
Poify
快手推出的专注于电商领域的AI作图工具
189 查看详情 
use InertiaInertia;
Route::get(‘/’, function () {
return Inertia::render(‘Home’);
});
Route::get(‘/about’, function () {
return Inertia::render(‘About’);
});
Inertia::render(‘Home’) 会自动加载 resources/js/Pages/Home.vue 组件。
5. 编译前端资源
配置 Vite 或 Laravel Mix 来编译 JS/CSS。以 Vite 为例（Laravel 9+ 默认使用 Vite）：
编辑 vite.config.js：
import { defineConfig } from ‘vite’;
import laravel from ‘laravel-vite-plugin’;
import vue from ‘@vitejs/plugin-vue’;
export default defineConfig({
plugins: [
laravel({
input: [‘resources/css/app.css’, ‘resources/js/app.js’],
refresh: true,
}),
vue({
reactivityTransform: true
}),
],
});
运行编译命令：
npm run dev
确保在 resources/views/app.blade.php 中引入编译后的资源：
@vite([‘resources/js/app.js’])
6. 启动应用并测试 SPA 效果
启动 Laravel 开发服务器：
php artisan serve
访问 http://localhost:8000，点击链接跳转到 /about，你会发现页面无刷新切换 —— 这就是 Inertia 实现的单页应用效果。
Inertia 会通过 XHR 请求获取新页面的 JSON 数据，并交由 Vue 渲染，整个过程无需全量刷新。
基本上就这些。你已经成功构建了一个基于 Laravel + Inertia.js + Vue 的单页应用。后续可以添加布局、中间件、表单提交、共享数据等高级功能。关键是理解 Inertia 扮演的“中间人”角色：它让 Laravel 控制器决定渲染哪个 Vue 页面，同时保持 SPA 体验。不复杂但容易忽略细节。
以上就是laravel怎么结合Inertia.js和Vue构建单页应用_laravel Inertia.js+Vue单页应用实现方法的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/827666.html
微信扫一扫 
支付宝扫一扫 
