Laravel + Vue.js 全栈开发实战经验总结

为什么选择 Laravel + Vue

Laravel 提供了优雅的后端框架，Vue.js 则让前端交互变得流畅。两者的组合是目前 PHP 生态中最现代的全栈方案。

Laravel 的优势在于：

• 优雅的路由和中间件系统
• 强大的 Eloquent ORM
• 内置的队列、事件、广播
• 丰富的生态包（Sanctum, Horizon, Telescope）

Vue.js 的优势在于：

• 渐进式框架，上手简单
• 响应式数据绑定
• 组件化开发模式
• 丰富的组件库生态

项目架构

在我的个人网站项目中，采用了以下架构：

后端（Laravel 11）

• 路由分离：routes/web.php 处理页面入口，routes/api.php 处理 API 接口
• API 优先：所有前端数据通过 API 获取，前后端完全分离
• Session 认证：管理后台使用 Laravel Session 进行认证，简单高效
• 数据库设计：使用 MySQL，通过 Migration 管理表结构变更

前端（Vue 3 SPA）

• Vue Router：前端路由管理，支持嵌套路由和路由守卫
• Axios/Fetch：API 请求封装，统一错误处理
• Pinia/Composition API：状态管理，使用 ref 和 computed
• Vite 构建：快速的热更新和构建

踩坑记录

1. CORS 问题

前后端分离开发时，Vue 运行在 5173 端口，Laravel 运行在 8000 端口。需要在 Laravel 中配置 CORS：

// config/cors.php
'paths' => ['api/*'],
'allowed_methods' => ['*'],
'allowed_origins' => ['http://localhost:5173'],
'allowed_headers' => ['*'],

2. Session 跨域问题

API 认证使用 Session 时，需要确保 Cookie 跨域传递：

// bootstrap/app.php
$middleware->api(append: [
    \Illuminate\Cookie\Middleware\EncryptCookies::class,
    \Illuminate\Session\Middleware\StartSession::class,
]);

前端请求需要携带凭证：

fetch('/api/...', { credentials: 'include' });

3. Vite 构建路径

Laravel 的 Vite 配置中，build.outDir 需要指向 public/build，并在 Blade 模板中使用 @vite 指令引入资源。

4. Markdown 渲染

博客文章内容使用 Markdown 存储，前端使用 marked 库渲染。需要注意 XSS 防护，对用户输入进行过滤。

性能优化建议

1. 数据库索引：对常用查询字段建立索引
2. 缓存策略：使用 Redis 缓存热点数据
3. 前端懒加载：路由组件按需加载
4. CDN 加速：静态资源使用 CDN
5. 图片优化：使用 WebP 格式，按需加载

总结

Laravel + Vue.js 是一套成熟的全栈开发方案，适合中小型项目快速开发。关键在于架构设计的合理性和细节的处理。未来，如果追求更高性能和更低维护成本，可以考虑迁移到 Astro 等静态站点生成方案。