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 方案：

• 使用 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、认证和代理，开发流程会非常顺畅。