Laravel如何与Vue.js或React集成开发_Laravel前后端分离与构建方案-Laravel-PHP中文网

Laravel如何与Vue.js或React集成开发_Laravel前后端分离与构建方案

冰火之心

发布： 2025-11-23 19:32:40

原创

644人浏览过

Laravel作为后端API，配合Vue.js或React前端实现分离架构。1. Laravel在api.php定义路由，返回JSON，启用CORS并使用Sanctum认证；2. 前端独立搭建，通过Vite或CRA创建项目，配置代理避免跨域；3. 前端登录后保存Token并携带Authorization头请求API；4. 开发时前后端独立运行，生产可选分离或统一部署，Laravel仅提供数据，前端专注交互，提升可维护性与扩展性。

laravel如何与vue.js或react集成开发_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。

示例：Laravel API 路由

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），避免跨域问题。

Vite 代理配置示例：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://laravel.test',
        changeOrigin: true,
      }
    }
  }
})

登录后复制

React 方案：

必应图像创建器

微软必应出品的AI绘图工具

593

查看详情

使用 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）：

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

以上就是Laravel如何与Vue.js或React集成开发_Laravel前后端分离与构建方案的详细内容，更多请关注php中文网其它相关文章！