191 lines
4.6 KiB
Markdown
191 lines
4.6 KiB
Markdown
# FrontendDesigner Vercel 部署指南
|
||
|
||
## 项目概述
|
||
FrontendDesigner 是一个基于 Vue 3 + Vite + Element Plus 的前端管理后台项目，已成功配置 Vercel 部署。
|
||
|
||
## 部署准备
|
||
|
||
### 1. 项目结构
|
||
```
|
||
apps/FrontendDesigner/
|
||
├── vercel.json # Vercel 配置文件（已创建）
|
||
├── package.json # 项目依赖配置
|
||
├── vite.config.js # Vite 构建配置
|
||
├── src/ # 源代码目录
|
||
├── dist/ # 构建输出目录（已生成）
|
||
└── public/ # 静态资源目录
|
||
```
|
||
|
||
### 3. Vercel 配置文件
|
||
已创建的 `vercel.json` 包含以下配置：
|
||
- 构建命令：`npm run build`
|
||
- 输出目录：`dist`
|
||
- **自定义别名**: `frontenddesigner`
|
||
- 单页应用路由支持
|
||
- 静态资源缓存配置
|
||
- CORS 头部配置
|
||
|
||
### 3. 构建状态
|
||
✅ **构建测试通过** - 项目已成功构建，无错误。
|
||
|
||
## 部署步骤
|
||
|
||
### 方式一：通过 Vercel Dashboard
|
||
|
||
1. **登录 Vercel**
|
||
- 访问 [vercel.com](https://vercel.com)
|
||
- 使用 GitHub、GitLab 或 Email 登录
|
||
|
||
2. **创建新项目**
|
||
- 点击 "New Project"
|
||
- 选择 "Import Git Repository"
|
||
|
||
3. **连接仓库**
|
||
- 选择包含此项目的 Git 仓库
|
||
- 设置项目名称为 `FrontendDesigner`
|
||
|
||
4. **配置构建设置**
|
||
```
|
||
Framework Preset: Vite
|
||
Build Command: npm run build
|
||
Output Directory: dist
|
||
Install Command: npm install
|
||
```
|
||
|
||
5. **环境变量配置**
|
||
- 如需环境变量，在 Vercel Dashboard 中配置
|
||
- 对于此项目通常不需要环境变量
|
||
|
||
6. **部署**
|
||
- 点击 "Deploy" 开始部署
|
||
- 等待部署完成（通常 2-3 分钟）
|
||
|
||
### 方式二：通过 Vercel CLI
|
||
|
||
1. **安装 Vercel CLI**
|
||
```bash
|
||
npm install -g vercel
|
||
```
|
||
|
||
2. **登录 Vercel**
|
||
```bash
|
||
vercel login
|
||
```
|
||
|
||
3. **部署项目**
|
||
```bash
|
||
cd d:\work\Aiproject\DeotalandAi\apps\FrontendDesigner
|
||
vercel --prod
|
||
```
|
||
|
||
4. **按提示配置项目**
|
||
- 项目名称：FrontendDesigner
|
||
- 目录：./ (当前目录)
|
||
- 构建命令：npm run build
|
||
- 输出目录：dist
|
||
- 别名已配置：`frontenddesigner`
|
||
|
||
### 自定义别名说明
|
||
|
||
项目已配置别名，部署后可通过以下 URL 访问：
|
||
- `https://frontenddesigner.vercel.app`
|
||
|
||
如果该别名已被占用，Vercel 会自动分配其他可用的别名。
|
||
|
||
### 方式三：通过 GitHub 集成
|
||
|
||
1. **推送代码到 GitHub**
|
||
```bash
|
||
git add .
|
||
git commit -m "Add Vercel deployment configuration"
|
||
git push origin main
|
||
```
|
||
|
||
2. **连接 GitHub 到 Vercel**
|
||
- 在 Vercel Dashboard 中选择 "Import Git Repository"
|
||
- 选择您的 GitHub 仓库
|
||
- 启用自动部署
|
||
|
||
## 部署后配置
|
||
|
||
### 自定义域名（可选）
|
||
1. 在 Vercel Dashboard 中选择项目
|
||
2. 进入 "Settings" > "Domains"
|
||
3. 添加您的自定义域名
|
||
4. 按照提示配置 DNS 记录
|
||
|
||
### 环境变量
|
||
如果需要配置环境变量：
|
||
1. 进入项目设置 > Environment Variables
|
||
2. 添加所需的环境变量
|
||
3. 重新部署项目
|
||
|
||
## 构建优化建议
|
||
|
||
### 当前构建分析
|
||
- 总大小：约 1.6MB (gzipped)
|
||
- 主要包大小：
|
||
- AdminContentReview: 619KB (160KB gzipped)
|
||
- Element Plus DatePicker: 191KB (60KB gzipped)
|
||
- Element Plus Select: 32KB (11KB gzipped)
|
||
|
||
### 优化建议
|
||
1. **代码分割**
|
||
- 使用动态导入 `import()` 分割路由
|
||
- Element Plus 组件按需引入
|
||
|
||
2. **懒加载**
|
||
- 管理员页面组件懒加载
|
||
- 减少首屏加载时间
|
||
|
||
3. **缓存策略**
|
||
- 静态资源已配置长期缓存
|
||
- HTML 文件短期缓存
|
||
|
||
## 常见问题
|
||
|
||
### 构建失败
|
||
- 确保所有依赖都已正确安装
|
||
- 检查图标导入是否正确（已修复）
|
||
- 验证 Vite 配置无误
|
||
|
||
### 路由 404 问题
|
||
- 已配置 `vercel.json` 支持 SPA 路由
|
||
- 确保所有路由重定向到 `index.html`
|
||
|
||
### 性能问题
|
||
- 考虑使用 Vercel 的 Edge Network
|
||
- 启用 Gzip 压缩（默认开启）
|
||
- 配置合适的缓存策略
|
||
|
||
## 部署验证
|
||
|
||
部署完成后，请验证以下功能：
|
||
1. ✅ 页面正常加载
|
||
2. ✅ 路由跳转正常
|
||
3. ✅ 管理后台功能正常
|
||
4. ✅ 中英文切换正常
|
||
5. ✅ 响应式布局正常
|
||
6. ✅ Element Plus 组件正常显示
|
||
|
||
## 技术栈信息
|
||
|
||
- **前端框架**: Vue 3 (Composition API)
|
||
- **UI 组件库**: Element Plus 2.11.7
|
||
- **构建工具**: Vite 7.2.2
|
||
- **路由**: Vue Router 4.4.5
|
||
- **国际化**: Vue I18n 9.14.2
|
||
- **状态管理**: Pinia 2.2.6
|
||
- **部署平台**: Vercel
|
||
|
||
## 联系支持
|
||
|
||
如需技术支持，请检查：
|
||
1. Vercel 部署日志
|
||
2. 浏览器开发者工具控制台
|
||
3. 网络连接状态
|
||
|
||
---
|
||
**部署配置完成时间**: 2025-11-18 19:57
|
||
**构建状态**: ✅ 成功
|
||
**部署就绪**: ✅ 是 |