基于 Vue 3 + Vite + Element Plus 构建的博客前台展示系统。
- 前端框架: Vue 3.4.15
- 构建工具: Vite 5.0.11
- UI 组件库: Element Plus 2.5.1
- 状态管理: Pinia 2.1.7
- 路由: Vue Router 4.2.5
- HTTP 客户端: Axios 1.6.5
- Markdown 渲染: Marked 11.1.1
- 代码高亮: Highlight.js 11.9.0
- 动画库: GSAP 3.12.5
- 平滑滚动: Lenis 1.1.0
- 样式预处理: SCSS
blog-frontend/
├── src/
│ ├── api/ # API 接口
│ │ ├── article.ts # 文章相关接口
│ │ ├── category.ts # 分类相关接口
│ │ ├── config.ts # 配置相关接口
│ │ ├── index.ts # API 统一导出
│ │ ├── menu.ts # 菜单相关接口
│ │ ├── stats.ts # 统计相关接口
│ │ └── theme.ts # 主题相关接口
│ ├── assets/ # 静态资源
│ │ └── styles/ # 全局样式
│ ├── components/ # 公共组件
│ │ ├── ArticleCard.vue # 文章卡片
│ │ ├── Footer.vue # 页脚
│ │ ├── Navigation.vue # 导航栏
│ │ └── ThemeSwitcher.vue # 主题切换器
│ ├── router/ # 路由配置
│ │ └── index.ts # 路由定义
│ ├── stores/ # Pinia 状态管理
│ │ ├── index.ts # Store 统一导出
│ │ ├── menu.ts # 菜单状态
│ │ └── theme.ts # 主题状态
│ ├── utils/ # 工具函数
│ │ ├── format.ts # 格式化工具
│ │ └── http.ts # Axios 封装
│ ├── views/ # 页面视图
│ │ ├── About.vue # 关于页面
│ │ ├── ArticleDetail.vue # 文章详情
│ │ ├── Articles.vue # 文章列表
│ │ ├── Category.vue # 分类页面
│ │ ├── Home.vue # 首页
│ │ └── NotFound.vue # 404页面
│ ├── App.vue # 根组件
│ ├── env.d.ts # 环境类型声明
│ └── main.ts # 入口文件
├── Dockerfile # Docker 构建配置
├── nginx.conf # Nginx 配置文件
├── vite.config.ts # Vite 配置
└── package.json # 项目依赖
- 首页: 博客首页，展示精选文章和统计数据
- 文章列表: 分页展示所有文章
- 文章详情: Markdown 渲染、代码高亮、文章阅读
- 分类浏览: 按分类查看文章
- 关于页面: 博客介绍页面
- 主题切换: 支持明暗主题切换
- 响应式设计: 适配移动端和桌面端
- Node.js >= 18.0.0
- pnpm >= 8.0.0 (推荐) 或 npm >= 9.0.0
- 后端服务已启动 (默认端口 3001)
# 进入项目目录
cd blog-frontend
# 使用 pnpm 安装依赖
pnpm install
# 或使用 npm
npm install在项目根目录创建 .env 文件：
# API 基础地址
VITE_API_BASE_URL=http://localhost:3001/api# 使用 pnpm
pnpm dev
# 或使用 npm
npm run dev开发服务器默认运行在 http://localhost:5173
# 使用 pnpm
pnpm build
# 或使用 npm
npm run build构建输出目录为 dist/。
# 进入项目目录
cd blog-frontend
# 构建镜像
docker build -t blog-frontend:latest .# 运行容器，映射到主机的 80 端口
docker run -d \
--name blog-frontend \
-p 80:80 \
--network blog-network \
blog-frontend:latest注意：需要将容器加入到后端服务所在的网络
blog-network，或者使用--link连接后端容器。
创建 docker-compose.yml 文件：
version: '3.8'
services:
blog-frontend:
build: ./blog-frontend
container_name: blog-frontend
ports:
- "80:80"
networks:
- blog-network
depends_on:
- backend
backend:
# 后端服务配置
# ...
networks:
blog-network:
driver: bridge运行：
docker-compose up -dnpm run build将 nginx.conf 复制到 Nginx 配置目录：
# Linux 示例
sudo cp nginx.conf /etc/nginx/conf.d/blog-frontend.conf
# 修改配置中的后端地址
sudo nano /etc/nginx/conf.d/blog-frontend.conf修改 proxy_pass 指向实际的后端服务地址：
location /api {
proxy_pass http://your-backend-host:3001;
# ...
}# 复制构建产物到 Nginx 目录
sudo cp -r dist/* /usr/share/nginx/html/sudo nginx -s reload| 配置项 | 说明 | 默认值 |
|---|---|---|
| server.port | 开发服务器端口 | 5173 |
| server.proxy | 开发环境代理配置 | 代理 /api 到 localhost:3001 |
| build.outDir | 构建输出目录 | dist |
| build.assetsDir | 静态资源目录 | assets |
| 变量名 | 说明 | 示例 |
|---|---|---|
| VITE_API_BASE_URL | API 基础地址 | /api 或 http://localhost:3001/api |
检查 vite.config.ts 中的代理配置，确保后端服务已启动在配置的端口上。
生产环境需要配置 Nginx 反向代理，参考上面的 Nginx 部署章节。
确保安装了 marked 和 highlight.js 依赖，并正确引入样式文件。
检查 theme.ts store 是否正确配置，以及主题样式是否正确加载。
检查容器网络配置，确保前端容器可以访问到后端服务。可以使用 Docker Compose 统一管理网络。
确保 Nginx 配置中正确代理了 /uploads 路径到后端服务。
- 使用 TypeScript 编写代码
- 组件使用 Vue 3 Composition API
- API 接口统一放在
src/api目录 - 使用 Pinia 进行状态管理
- 样式使用 SCSS
- 使用 GSAP 实现复杂动画效果
- 代码分割：Element Plus 和 Vue 相关库单独打包
- 静态资源缓存：Nginx 配置 1 年缓存期
- 路由懒加载：按需加载页面组件
- 图片优化：使用适当的图片格式和尺寸
MIT