Laravel作为后端API，配合Vue.js或React前端实现分离架构。1. Laravel在api.php定义路由，返回JSON，启用CORS并使用Sanctum认证；2. 前端独立搭建，通过Vite或CRA创建项目，配置代理避免跨域；3. 前端登录后保存Token并携带Authorization头请求API；4. 开发时前后端独立运行，生产可选分离或统一部署，Laravel仅提供数据，前端专注交互，提升可维护性与扩展性。
Laravel 本身是一个功能完整的全栈 PHP 框架，但现代开发中越来越多项目采用前后端分离架构。将 Laravel 作为后端 API 服务，配合 Vue.js 或 React 构建独立的前端应用，是当前主流的开发模式之一。下面介绍如何高效地将 Laravel 与 Vue.js 或 React 集成，实现前后端分离开发。
1. 使用 Laravel 作为纯后端 API 服务
要实现前后端分离，第一步是让 Laravel 只负责提供 RESTful 或 JSON API 接口，不再承担页面渲染任务。
关键配置：
- 在 routes/api.php 中定义所有接口路由，这些路由自动加上 /api 前缀。
- 控制器返回 JSON 数据，使用 response()->json() 或直接返回数组。
- 启用 CORS 支持：安装 fruitcake/laravel-cors 包，允许前端域名跨域请求。
- 认证方式改用 Token（如 Sanctum 或 Passport），不再依赖 Session。
Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
return $request->user();
});
2. 前端项目独立搭建（Vue.js 或 React）
前端不再放在 Laravel 的 resources 目录下，而是作为一个独立项目开发，提升可维护性和团队协作效率。
立即学习“前端免费学习笔记（深入）”；
Vue.js 方案：
- 使用 Vite 或 Vue CLI 创建项目：
npm create vue@latest - 通过 axios 调用 Laravel 提供的 API 接口。
- 开发时配置代理（vite.config.js），避免跨域问题。
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://laravel.test',
changeOrigin: true,
}
}
}
})
React 方案：
Sylius开源电子商务平台
下载
Sylius开源电子商务平台是一个开源的 PHP 电子商务网站框架，基于 Symfony 和 Doctrine 构建，为用户量身定制解决方案。可管理任意复杂的产品和分类，每个产品可以设置不同的税率，支持多种配送方法，集成 Omnipay 在线支付。功能特点：前后端分离Sylius 带有一个强大的 REST API，可以自定义并与您选择的前端或您的微服务架构很好地配合使用。如果您是 Symfony
- 使用 Create React App 或 Vite 初始化项目：
create-react-app frontend - 通过 fetch 或 axios 请求 Laravel 后端 API。
- 同样在 vite.config.js 或 package.json 中设置代理。
3. 认证与用户状态管理
前后端分离后，传统 Session 认证不再适用，推荐使用 Laravel Sanctum 实现 Token 认证。
集成步骤：
- 安装 Sanctum：
composer require laravel/sanctum - 发布并运行迁移：
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider" - 在 config/cors.php 中设置允许 credentials 和对应域名。
- 前端登录成功后保存 Token（localStorage 或内存），后续请求带上 Authorization 头。
axios.post('/api/login', { email, password })
.then(response => {
const token = response.data.token;
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
});
4. 开发环境联调与部署策略
开发阶段保持前后端独立运行，生产环境可选择合并部署或分开部署。
开发建议：
- Laravel 启动：php artisan serve，默认监听 8000 端口。
- 前端启动：npm run dev，默认监听 5173（Vite）或 3000（CRA）。
- 前端通过代理将 /api 请求转发到 Laravel 服务。
生产部署选项：
- 方案一：前后端分离部署 —— Laravel 部署在 api.example.com，React/Vue 部署在 example.com，通过 CDN 托管静态资源。
- 方案二：统一部署 —— 将构建后的前端 dist 文件放入 Laravel 的 public/ 目录，由 Laravel 提供单页入口 index.html，适合小型项目。
基本上就这些。Laravel 与 Vue.js 或 React 的分离架构清晰、扩展性强，适合中大型项目。关键是明确职责划分：Laravel 只输出数据，前端专注交互体验。合理配置 CORS、认证和代理，开发流程会非常顺畅。
