Yii2+Vue3前后端分离项目实战从零搭建【干货】-php教程-PHP中文网

yii2与vue3可搭建前后端分离项目，关键在于接口契约清晰、部署解耦、跨域处理得当：后端用yii\rest\activecontroller暴露rest接口并配置cors，前端用vite+axios独立调用，nginx反向代理实现生产部署，适合php主力团队及遗留系统升级场景。

yii2+vue3前后端分离项目实战从零搭建【干货】

Yii2 和 Vue3 搭建前后端分离项目，不是主流组合，但可行——关键在于接口契约清晰、部署解耦、跨域处理得当。Yii2 是成熟稳定的 PHP 框架，适合快速构建 RESTful 后端；Vue3 作为现代前端框架，负责交互与渲染。两者不直接耦合，靠 HTTP API 通信，本质仍是标准的前后端分离架构。

后端：Yii2 快速暴露 REST 接口

Yii2 默认支持 RESTful 风格开发，无需额外插件：

用 yii\rest\ActiveController 快速生成资源控制器（如 UserController），自动提供 GET /users、POST /users 等标准动作

在 config/web.php 中启用 JSON 响应和 CORS（开发阶段）：

'response' => [
    'format' => \yii\web\Response::FORMAT_JSON,
    'charset' => 'UTF-8',
],
'components' => [
    'request' => [
        'enableCsrfValidation' => false, // API 场景通常关闭 CSRF
    ],
    'response' => [...],
    'user' => [
        'identityClass' => 'app\models\User',
        'enableAutoLogin' => false,
    ],
    'urlManager' => [
        'enablePrettyUrl' => true,
        'showScriptName' => false,
        'rules' => [],
    ],
    'cors' => [
        'class' => \yii\filters\Cors::class,
        'cors' => [
            'Origin' => ['http://localhost:5173'], // Vue3 Vite 默认端口
            'Access-Control-Request-Method' => ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
            'Access-Control-Request-Headers' => ['*'],
            'Access-Control-Allow-Credentials' => true,
        ],
    ],
],

数据库用 ActiveRecord 定义模型，搭配 migrations 管理表结构，比手写 SQL 更工程化

前端：Vue3 + Vite 标准接入 Yii2 接口

前端完全独立，不依赖 Yii 视图层：

Vue

避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。

下载

用 npm create vite@latest my-app --template vue 初始化，安装 axios 和 vue-router
统一配置请求 baseURL 指向 Yii2 后端（如 http://localhost:8000/api），避免硬编码

登录后将 JWT 或 session ID 存入 localStorage 或 pinia，后续请求通过 axios 拦截器自动携带：

// src/utils/request.js
import axios from 'axios'
const request = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL })
request.interceptors.request.use(config => {
  const token = localStorage.getItem('access_token')
  if (token) config.headers.Authorization = `Bearer ${token}`
  return config
})

路由守卫（router.beforeEach）检查登录态，未登录跳转至 /login

联调与部署关键点

前后端物理分离，部署方式灵活：

开发时：Yii2 启动内置服务器（php yii serve 或 Apache/Nginx），Vue3 用 npm run dev（端口 5173），CORS 已配好即可直连
生产部署推荐 Nginx 反向代理：
- 前端打包后放静态目录（如 /var/www/frontend）
- 后端 Yii2 放 PHP 运行环境（如 /var/www/backend/web），Nginx 配置 location /api/ 转发到 PHP-FPM
- 避免跨域问题，也更安全
注意 Yii2 的 URL 路由需与前端 router 的 history 模式兼容：Nginx 需添加 try_files $uri $uri/ /index.php?$args 防止刷新 404