Laravel如何与Vue.js集成_Laravel + Vue前后端分离项目搭建指南

Laravel与Vue.js前后端分离架构通过Laravel提供API、Vue构建界面，使用Sanctum实现认证，配置CORS与CSRF保护，开发时独立运行服务，生产可选择分离或统一部署，关键在于理清接口通信与安全设置。

将Laravel与Vue.js集成，尤其是实现前后端分离架构，已经成为现代Web开发的常见选择。Laravel作为强大的PHP后端框架，负责API接口和业务逻辑；Vue.js作为前端渐进式框架，负责构建用户界面。下面是一套清晰的搭建流程，帮助你快速构建一个Laravel + Vue前后端分离项目。

1. 创建Laravel项目并配置API路由

使用Composer创建新的Laravel项目：

composer create-project laravel/laravel laravel-vue-api
cd laravel-vue-api

进入项目后，确保.env文件中的数据库配置正确，并运行迁移：

php artisan migrate

Laravel默认包含用户认证系统。若需要API认证，推荐使用Sanctum：

composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate

在app/Http/Kernel.php中确保EnsureFrontendRequestsAreStateful中间件已启用。然后在routes/api.php中定义API路由：

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

这为后续前端获取用户信息打下基础。

2. 搭建Vue前端项目（独立目录）

为了实现真正的前后端分离，建议将Vue项目独立于Laravel之外。在Laravel项目同级目录下创建Vue项目：

cd ..
vue create vue-frontend
cd vue-frontend

安装Axios用于发送HTTP请求：

npm install axios

配置axios默认基础URL指向Laravel API：

在src/main.js中添加：

import axios from 'axios'
axios.defaults.baseURL = 'http://laravel-vue-api.test/api'

注意：确保Laravel项目通过Valet、Homestead或Docker配置了可访问的域名（如laravel-vue-api.test），并开启CORS支持。可在app/Http/Middleware/Cors中设置，或使用fruitcake/laravel-cors包：

composer require fruitcake/laravel-cors

在app/Http/Kernel.php的$middlewareGroups中加入\Fruitcake\Cors\HandleCors::class。

3. 实现用户认证（登录/注册）

在Laravel中启用Sanctum的CSRF保护，以便SPA跨域安全通信。在app/Http/Middleware/VerifyCsrfToken.php中添加前端域名到$except数组（开发环境可暂时忽略，生产环境需配置）。

前端Vue组件中，先请求获取CSRF Cookie：

await axios.get('http://laravel-vue-api.test/sanctum/csrf-cookie')

然后发送登录请求：

const response = await axios.post('http://laravel-vue-api.test/login', {
  email: 'user@example.com',
  password: 'password'
})

登录成功后，后续请求会自动携带Session Cookie，可访问受保护的API。登出时调用/logout即可。

4. 开发与部署建议

开发阶段，前后端分别启动：

• Laravel：使用php artisan serve启动服务
• Vue：使用npm run serve启动开发服务器（通常运行在localhost:8080）

生产环境下，可选择两种部署方式：

• 完全分离部署：Laravel部署在API服务器，Vue构建后部署到Nginx、Vercel或Netlify等静态托管平台
• 统一部署：将Vue构建产物放入Laravel的public目录，由Laravel统一提供前端页面，但API仍走/api路径

若采用统一部署，构建Vue项目：

npm run build

将生成的dist目录文件复制到Laravel的public下，并创建一个通用入口public/index.html，或使用路由回退：

// routes/web.php
Route::get('/{any}', function () {
    return view('index');
})->where('any', '.*');

确保该路由位于所有命名路由之后。

基本上就这些。Laravel与Vue的前后端分离架构灵活且高效，关键是理清请求流程、跨域处理和认证机制。只要配置得当，开发体验流畅，适合中大型项目迭代。不复杂但容易忽略细节，比如CSRF和CORS设置，务必仔细检查。