PHP/Laravel + Vue3 + MySQL + Docker 项目搭建全流程指南（Al总结版未测试未编辑）

PHP/Laravel + Vue3 + MySQL + Docker 项目搭建全流程指南

---

一、环境准备（仅需 Docker）

1. 安装 Docker Desktop
   • Windows/macOS：下载 Docker Desktop 并安装。
   • Linux：安装 docker-ce 和 docker-compose-plugin。

     # Ubuntu 示例
     sudo apt update && sudo apt install docker-ce docker-compose-plugin
     

   ✅ 验证：运行 docker --version 和 docker compose version 确保安装成功。

---

️ 二、创建 Laravel 后端项目

1. 使用官方脚本初始化（无需本地 PHP/Composer）

   curl -s "https://laravel.build/project-name?with=mysql" | bash
   

   • 参数说明：
     • project-name：自定义项目名（如 your-project）。
     • with=mysql：集成 MySQL 容器（默认包含 Redis）。
2. 进入项目目录

   cd project-name
   

---

三、配置 Docker 环境（Laravel Sail）

1. 启动容器服务

   ./vendor/bin/sail up -d
   

   • 首次启动会自动构建镜像（PHP 8.x、MySQL、Redis 等）。
2. 生成 Laravel 环境配置

   ./vendor/bin/sail artisan key:generate
   cp .env.example .env
   

   • 修改 .env 中的数据库配置（默认已适配 Sail 容器）：

     DB_CONNECTION=mysql
     DB_HOST=mysql  # 容器内服务名
     DB_PORT=3306
     DB_DATABASE=laravel
     DB_USERNAME=sail
     DB_PASSWORD=password
     

---

四、集成 Vue 3 前端

1. 安装 Node.js 本地环境（必需）
   • 下载 Node.js（LTS 版本）并安装（含 npm）。

   前端编译需直接操作宿主机文件，因此 Node.js 必须本地安装。

2. 初始化 Vue 3 项目

   # 在 Laravel 项目根目录执行
   npm create vue@latest ./resources/js
   

   • 按提示选择配置（推荐：TypeScript + Pinia + Vue Router）。
3. 配置 Laravel 混合编译
   • 安装 Laravel Mix 和依赖：

     npm install laravel-mix vue@latest @vitejs/plugin-vue --save-dev
     

   • 创建 vite.config.js：

     import { defineConfig } from 'vite';
     import vue from '@vitejs/plugin-vue';
     import laravel from 'laravel-vite-plugin';
     
     export default defineConfig({
       plugins: [
         vue(),
         laravel({
           input: ['resources/js/app.ts'],
           refresh: true,
         }),
       ],
     });
     

   • 修改 resources/views/welcome.blade.php 加载 Vue 入口：

     <div id="app">div>
     @vite('resources/js/app.ts')
     

---

五、前后端交互配置

1. API 路由与控制器
   • 创建 API 路由（routes/api.php）：

     use App\Http\Controllers\UserController;
     Route::get('/users', [UserController::class, 'index']);
     

   • 生成控制器：

     ./vendor/bin/sail artisan make:controller UserController
     

2. 前端调用 API（Axios 示例）

   // resources/js/services/api.ts
   import axios from 'axios';
   const api = axios.create({ baseURL: '/api' });
   export const getUsers = () => api.get('/users');
   

3. 解决跨域问题
   • 安装 CORS 包：

     ./vendor/bin/sail composer require fruitcake/laravel-cors
     

   • 在 app/Http/Kernel.php 启用中间件：

     protected $middleware = [ \Fruitcake\Cors\HandleCors::class ];
     

---

六、启动与开发流程

1. 同时运行后端与前端
   • 后端服务（保持运行）：

     ./vendor/bin/sail up -d
     

   • 前端编译（热更新模式）：

     npm run dev
     

2. 访问项目
   • 打开浏览器访问：http://localhost（默认端口 80）。
3. 常用 Sail 命令

   命令	作用
   sail artisan migrate	运行数据库迁移
   sail composer update	容器内更新依赖
   sail npm install	容器内安装前端依赖

---

七、生产部署优化

1. 构建生产环境镜像

   ./vendor/bin/sail build --no-cache
   

2. 编译前端静态资源

   npm run build
   

3. 使用独立 Nginx 配置
   • 参考 docker-compose.yml 定制生产配置（分离 PHP-FPM 与 Nginx）。

---

总结

阶段	关键操作	工具/命令
环境准备	安装 Docker Desktop	docker --version
项目初始化	通过 curl 脚本创建 Laravel + MySQL	curl -s "laravel.build/..." | bash
前端集成	本地安装 Node.js + Vue 3	npm create vue@latest
容器管理	使用 Laravel Sail 启动服务	sail up -d
开发调试	双进程运行：Sail + npm run dev	浏览器访问 http://localhost

✅ 完整流程已通过 Docker 容器化实现环境一致性，无需本地 PHP/MySQL。前端编译依赖本地 Node.js 是唯一宿主机强依赖。

---

引用链接：
1.用Vue3+Laravel打造自己的AI助手,完整项目开源! - xiumu wu
2.PHP开发全流程:从零到部署的实战指南 - 小桔灯照亮学习之路
3.搭建Laravel 11 与 Vue 3 开发环境 - CSDN博客
4.Docker环境下Laravel开发环境搭建指南 - CSDN博客
5.PHP全栈开发:Laravel 10 + Vue 3 + MySQL 实战项目教程 - 51CTO学堂
6.使用Docker 高效搭建本地开发环境(详细教程) - 腾讯云
7.用dockerfile部署一个laravel项目 - 51CTO博客
8.Docker一键部署!Typecho轻量博客搭建全攻略 - 二冰
9.新手也能用docker搭建PHP环境 - CSDN博客
10.docker部署laravel - CSDN博客
11.使用Docker部署Vue项目的完整指南 - 博客园
12.Docker建库秘籍!8步搞定 - 梦中万缕夏雨轻洒
13.laravel项目使用docker搭建 - 51CTO博客
14.【国产开发】一站式接口管理平台:Java+Vue3+Docker+MySQL - 黄禅宗 dogstar
15.如何在PHP中使用Docker进行开发和部署 - php中文网
16.laravel开发环境搭建_php laravel+vue+mysql-CSDN博客 - CSDN
17.PHP之旅—出发(php+apache+MySQL) - 江拥羡橙
18.laravel使用docker - 51CTO博客