# henfon-cloud-vue

**Repository Path**: henfon/henfon-cloud-vue

## Basic Information

- **Project Name**: henfon-cloud-vue
- **Description**: 后端脚手架微服务版前端
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-23
- **Last Updated**: 2026-05-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Henfon Cloud Vue（前端管理台）

Henfon 微服务脚手架前端项目，基于 Vue 3 + Vite + TypeScript + Naive UI。  
本项目默认使用后端动态路由和权限，不是纯前端写死菜单的模板。

## 配套后端

本前端需配套同级目录后端仓库运行：

- `../henfon-cloud`

后端核心服务：

- `henfon-modules-system`（系统服务，默认端口 `8082`）
- `henfon-gateway`（网关服务，默认端口 `8080`）

## 技术栈

- Vue 3.5
- Vite 7
- TypeScript 5
- Naive UI 2.43
- Pinia 3
- Vue Router 4 + Elegant Router
- UnoCSS
- Vue I18n

## 内置业务模块

- 用户管理
- 角色管理（含角色菜单分配、角色用户分配）
- 菜单管理
- 字典管理（字典类型 + 字典数据）
- 参数配置
- 登录日志
- 操作日志

## 动态路由与权限说明

- 登录后会请求后端 `/route/getUserRoutes` 获取动态路由
- 菜单来自后端数据库 `sys_menu`、`sys_role_menu`，不是前端硬编码
- 权限点来自后端，前端按权限控制页面和按钮展示

## 前置环境

### 前端

- Node.js >= 20.19.0
- pnpm >= 10.5.0

### 后端依赖（联调必需）

- MySQL（默认库：`henfon_cloud`）
- Redis（默认 `6379`）
- Nacos（默认 `8848`，命名空间 `dev`）

## 快速开始（推荐：直连系统服务模式）

该模式最容易上手，不经过网关，前端直接请求 `henfon-system`。

### 1. 启动后端依赖并初始化数据

1. 启动 MySQL、Redis、Nacos
2. 在 MySQL 创建数据库 `henfon_cloud`
3. 执行后端 SQL 脚本：
   - `../henfon-cloud/sql/init.sql`
4. 在 Nacos `dev` 命名空间导入配置：
   - `henfon-system.yaml`
   - `henfon-redis.yaml`
   - 位置：`../henfon-cloud/nacos-config/`

### 2. 启动后端系统服务

在 `../henfon-cloud/henfon-modules/henfon-modules-system` 目录执行：

```bash
mvn spring-boot:run
```

### 3. 启动前端

```bash
pnpm install
pnpm dev
```

默认访问：

- `http://localhost:9527`
- 若 9527 被占用，Vite 会自动切换到 `9528` 等其他端口

默认账号：

- 用户名：`admin`
- 密码：`123456`

## 网关模式（完整微服务链路）

若要走网关统一入口，请按以下步骤：

1. 启动网关服务 `../henfon-cloud/henfon-gateway`
2. 将前端 `.env.test` 中 `VITE_SERVICE_BASE_URL` 改为：
   - `http://localhost:8080/api`
3. 重启前端 `pnpm dev`

说明：

- 当前仓库默认 `.env.test` 配置是 `http://localhost:8082`（直连系统服务）
- 走网关时，前端请求路径会经过 `/api/**` 转发到具体服务

## 常用命令

```bash
pnpm dev           # 本地开发（test 模式）
pnpm dev:prod      # 本地开发（prod 模式）
pnpm build         # 生产构建
pnpm build:test    # 测试构建
pnpm lint          # 代码检查并修复
pnpm typecheck     # TS 类型检查
pnpm gen-route     # 生成路由文件
```

## 关键环境变量

- `VITE_SERVICE_BASE_URL`：主后端服务地址
- `VITE_HTTP_PROXY`：开发环境是否启用 Vite 代理（`Y/N`）
- `VITE_AUTH_ROUTE_MODE`：路由模式（`dynamic/static`）

## 常见问题

### 1. 登录后页面一直转圈

优先检查后端接口是否正常：

- `/auth/login`
- `/route/getUserRoutes`
- `/route/getConstantRoutes`

### 2. 前端报 500

通常是后端异常，需查看系统服务日志（数据库连接、Redis、Nacos 配置最常见）。

### 3. 出现 405 Method Not Allowed

说明前端请求方法或路径与后端控制器不一致，需对齐接口定义（如 `/list`、`/status/{id}` 等）。

## 目录结构

```text
src/
├── service/            # 接口请求（api/request）
├── store/              # 状态管理（auth/route/theme...）
├── router/             # 路由守卫与路由定义
├── views/              # 业务页面（manage/log/home）
├── layouts/            # 布局
├── components/         # 公共组件
├── locales/            # 国际化
├── hooks/              # 组合式 hooks
├── utils/              # 工具方法
└── typings/            # 类型定义
```

## License

MIT