Laravel + Vue 3 前后端分离实战项目【干货】-php教程-PHP中文网

laravel + vue3 前后端分离必须物理隔离项目、独立启动服务、api 走 api.php、认证用 sanctum 并配置 withcredentials 和 ensurefrontendrequestsarestateful，跨域靠 cors；复用 laravel vite 会导致热更新失效、路由冲突、token 冲突；vue3 应独立初始化并配代理，生产环境需 nginx 分离静态文件与 api 代理，session_domain 必须与前端域名一致。

laravel + vue 3 前后端分离实战项目【干货】

直接说结论：Laravel + Vue3 做前后端分离，必须物理隔离项目目录、独立启动服务、API 路由走 api.php、认证用 Sanctum、跨域靠 Cors 中间件或包——任何试图在 resources/js 里直接 createApp 并挂载到 Blade 页面的做法，都会在权限校验、热更新、路由跳转时踩坑。

为什么不能复用 Laravel 的 Vite 配置跑 Vue3 SPA

新版 Laravel 默认带 Vite，但它的 vite.config.js 是为「Blade 模板内嵌 Vue 组件」设计的，不是为独立 SPA。它默认把构建产物输出到 public/build/，且 laravel() 插件会自动注入 CSRF token 到页面，这和 Vue3 的纯前端路由、Token 存储（localStorage 或 Pinia）冲突。

开发时热更新会失效：Vite 监听的是 resources/js，但你真正要调试的是整个 Vue Router 的路由守卫和状态流，不是单个组件
axios 请求默认走相对路径，比如 /api/user，而 Laravel 开发服务器（php artisan serve）不代理前端请求，导致 404
生产环境部署时，npm run build 输出的静态文件被当成 Blade 模板资源处理，无法支持 history 模式路由回退

Vue3 项目必须独立创建并配置代理

正确做法是：在 Laravel 项目同级目录新建 vue-frontend 文件夹，用 npm create vue@latest 初始化，然后手动配代理，而不是塞进 Laravel 的 resources 里。

Laravel 13.2.0

PHP中文网提供Laravel 13.2.0版本下载，Laravel框架是基于 PHP 8.3+ 的高性能框架，官方推荐通过 Composer 安装。它内置 AI SDK、JSON:API Resources 及原生向量搜索，支持属性驱动开发与队列路由，大幅提升开发效率。相比旧版，13.2.0 优化了缓存 TTL 管理与实时通信，无需 Redis 即可横向扩展。作为现代 Web 开发首选，它兼顾安全与极速体验，助您快速构建企业级应用。

下载

在 vite.config.js 中加 server.proxy：

export default defineConfig({<br>  server: {<br>    proxy: {<br>      '/api': {<br>        target: 'http://your-laravel.test',<br>        changeOrigin: true,<br>        secure: false<br>      }<br>    }<br>  }<br>)

确保 Laravel 的 .env 里 APP_URL=http://your-laravel.test，且域名已通过 Valet / Homestead / Docker 解析
前端所有 API 请求写成 axios.get('/api/user')，不要硬编码 http://...，否则本地开发和生产环境切换麻烦

Sanctum 认证必须后端强制、前端只传 Token

Sanctum 在前后端分离场景下，本质是「Session + Token 混合模式」：登录成功后返回一个加密的 Cookie（sanctum_session），后续请求靠这个 Cookie 自动鉴权——但 Vue3 SPA 无法自动携带 Cookie，除非配置正确。

Laravel 端必须开启 EnsureFrontendRequestsAreStateful 中间件，并把它加到 app/Http/Kernel.php 的 $middlewareGroups['api'] 里

前端 axios 实例要设 withCredentials: true，否则浏览器不会发 Cookie：

const api = axios.create({<br>  baseURL: '/api',<br>  withCredentials: true<br>})

绝对不要在前端用 v-if="user.role === 'admin'" 控制按钮显隐——这个字段可能被篡改；真实权限必须由 Laravel 的 @can 或自定义中间件拦截，例如：Route::middleware('can:delete,App\Models\Post')->post('/posts/{id}', ...)

生产部署时静态文件不能扔进 public 目录

很多人图省事把 Vue3 构建后的 dist 文件夹整个拷进 Laravel 的 public，再用 index.php 路由兜底——这会导致两个问题：一是 history 模式下刷新 404，二是无法利用 Nginx 的静态文件缓存策略。

正确做法是：Nginx 分开配置两个 location：location / 指向 Vue3 的 dist 目录，location /api 反向代理到 Laravel 的 PHP-FPM
如果非要共用一个域名（如 example.com），Laravel 的 routes/web.php 必须删掉所有非 API 的路由，只留一个兜底：
```
Route::get('/{any?}', function () {<br>    return view('spa'); // 这个视图只含 <div id="app"></div><br>})->where('any', '.*');
```
Vue3 的 router 必须设 history 模式，且 base 为 '/'，否则子路由如 /user/profile 会 404

最常被忽略的点是：Laravel 的 SESSION_DOMAIN 和前端域名必须一致，否则 Cookie 不会被发送；另外，Vue3 的 Pinia store 里存的用户信息，永远只是展示用的快照，真实权限始终以每次 API 返回的 403 状态码为准——别信前端缓存的 role 字段。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！