Blog Admin - 个人博客管理后台

基于 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
• 富文本编辑器: WangEditor 5.1.23
• 图表库: ECharts 5.4.3
• 样式预处理: SCSS

项目结构

blog-admin/
├── src/
│   ├── api/              # API 接口
│   │   ├── modules/      # 按模块组织的接口
│   │   │   ├── article/  # 文章相关接口
│   │   │   ├── system/   # 系统管理接口
│   │   │   └── user/     # 用户相关接口
│   │   └── index.ts      # API 统一导出
│   ├── assets/           # 静态资源
│   │   └── styles/       # 全局样式
│   ├── components/       # 公共组件
│   ├── layouts/          # 布局组件
│   ├── router/           # 路由配置
│   ├── stores/           # Pinia 状态管理
│   ├── utils/            # 工具函数
│   │   └── http.ts       # Axios 封装
│   ├── views/            # 页面视图
│   │   ├── article/      # 文章管理
│   │   ├── system/       # 系统设置
│   │   ├── user/         # 用户管理
│   │   └── Dashboard.vue # 仪表盘
│   ├── App.vue           # 根组件
│   └── main.ts           # 入口文件
├── Dockerfile            # Docker 构建配置
├── nginx.conf            # Nginx 配置文件
├── vite.config.ts        # Vite 配置
└── package.json          # 项目依赖

功能模块

1. 仪表盘: 数据统计与可视化展示
2. 文章管理: 文章发布、编辑、分类、标签管理
3. 页面管理: 自定义页面管理
4. 系统设置: 网站配置、主题管理、字典管理
5. 菜单管理: 后台菜单配置
6. 用户管理: 管理员账号管理

部署教程

方式一：本地开发环境部署

1. 环境要求

• Node.js >= 18.0.0
• pnpm >= 8.0.0 (推荐) 或 npm >= 9.0.0
• 后端服务已启动 (默认端口 3001)

2. 安装依赖

# 进入项目目录
cd blog-admin

# 使用 pnpm 安装依赖
pnpm install

# 或使用 npm
npm install

3. 配置环境变量

在项目根目录创建 .env 文件：

# API 基础地址
VITE_API_BASE_URL=http://localhost:3001/api

4. 启动开发服务器

# 使用 pnpm
pnpm dev

# 或使用 npm
npm run dev

开发服务器默认运行在 http://localhost:5174

5. 构建生产版本

# 使用 pnpm
pnpm build

# 或使用 npm
npm run build

构建输出目录为 dist/。

方式二：Docker 部署

1. 构建 Docker 镜像

# 进入项目目录
cd blog-admin

# 构建镜像
docker build -t blog-admin:latest .

2. 运行容器

# 运行容器，映射到主机的 80 端口
docker run -d \
  --name blog-admin \
  -p 80:80 \
  --network blog-network \
  blog-admin:latest

注意：需要将容器加入到后端服务所在的网络 blog-network，或者使用 --link 连接后端容器。

3. Docker Compose 部署（推荐）

创建 docker-compose.yml 文件：

version: '3.8'

services:
  blog-admin:
    build: ./blog-admin
    container_name: blog-admin
    ports:
      - "80:80"
    networks:
      - blog-network
    depends_on:
      - backend

  backend:
    # 后端服务配置
    # ...

networks:
  blog-network:
    driver: bridge

运行：

docker-compose up -d

方式三：Nginx 部署

1. 构建项目

npm run build

2. 配置 Nginx

将 nginx.conf 复制到 Nginx 配置目录：

# Linux 示例
sudo cp nginx.conf /etc/nginx/conf.d/blog-admin.conf

# 修改配置中的后端地址
sudo nano /etc/nginx/conf.d/blog-admin.conf

修改 proxy_pass 指向实际的后端服务地址：

location /api {
    proxy_pass http://your-backend-host:3001;
    # ...
}

3. 部署静态文件

# 复制构建产物到 Nginx 目录
sudo cp -r dist/* /usr/share/nginx/html/blog-admin/

4. 重启 Nginx

sudo nginx -s reload

配置说明

Vite 配置 (vite.config.ts)

配置项	说明	默认值
server.port	开发服务器端口	5174
server.proxy	开发环境代理配置	代理 /api 到 localhost:3001
build.outDir	构建输出目录	dist
build.assetsDir	静态资源目录	assets

环境变量

变量名	说明	示例
VITE_API_BASE_URL	API 基础地址	/api 或 http://localhost:3001/api

常见问题

1. 开发环境代理不生效

检查 vite.config.ts 中的代理配置，确保后端服务已启动在配置的端口上。

2. 构建后 API 请求 404

生产环境需要配置 Nginx 反向代理，参考上面的 Nginx 部署章节。

3. 富文本编辑器加载失败

确保安装了 @wangeditor/editor 和 @wangeditor/editor-for-vue 依赖。

4. Docker 部署后无法连接后端

检查容器网络配置，确保前端容器可以访问到后端服务。可以使用 Docker Compose 统一管理网络。

开发规范

• 使用 TypeScript 编写代码
• 组件使用 Vue 3 Composition API
• API 接口统一放在 src/api/modules 目录
• 使用 Pinia 进行状态管理
• 样式使用 SCSS

许可证

MIT