# xiaolu-web

**Repository Path**: sprouting/xiaolu-web

## Basic Information

- **Project Name**: xiaolu-web
- **Description**: 小鹿ai写作助手web端
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-10-23
- **Last Updated**: 2026-11-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# xiaolu-web

小鹿管理系统前端，与 `xiaolu-server` 配套使用。

## 技术栈

| 技术 | 版本 | 说明 |
| --- | --- | --- |
| Vue | 3.x | 组合式 API + `<script setup>` |
| Vite | 7.x | 开发服务器与打包工具，替代旧项目的 webpack |
| Vue Router | 4.x | hash 模式，打包后可直接由后端静态资源服务 |
| Pinia | 3.x | 状态管理，替代旧项目的 Vuex |
| Element Plus | 2.x | UI 组件库，对应旧项目的 Element UI |
| Axios | 1.x | 请求库，统一封装表单提交与错误处理 |
| crypto-js | 4.x | 登录账号、密码的 DES 加密，与后端一致 |

## 快速开始

```bash
# 安装依赖
npm install

# 启动开发服务器（默认 http://127.0.0.1:8080）
npm run dev
```

启动前请确认后端 `xiaolu-server` 已运行在 `http://127.0.0.1:8098`。

初始账号：`admin / admin`

## 环境自动切换

不同环境通过 `.env.*` 文件区分，执行命令时由 Vite 自动加载，不需要改代码：

| 命令 | 加载文件 | 用途 |
| --- | --- | --- |
| `npm run dev` | `.env.development` | 本地开发 |
| `npm run build` | `.env.production` | 正式打包 |
| `npm run build:test` | `.env.test` | 测试环境打包，输出到 `dist-test/` |
| `npm run preview` | `.env.production` | 本地预览打包结果 |

常用变量：

| 变量 | 说明 |
| --- | --- |
| `VITE_APP_TITLE` | 系统名称 |
| `VITE_BASE_URL` | 静态资源前缀，生产为 `/xiaolu/` |
| `VITE_API_BASE_URL` | 接口前缀，默认 `/xiaolu` |
| `VITE_API_TIMEOUT` | 请求超时时间（毫秒） |
| `VITE_LOGIN_CODE` | 登录验证码，与后端 `xiaolu.login.verificationCode` 一致 |
| `VITE_PROXY_TARGET` | 开发环境后端地址 |
| `VITE_PORT` / `VITE_HOST` | 开发服务器端口与监听地址 |
| `VITE_OUT_DIR` | 打包输出目录 |

如果只想在本机临时覆盖，新建 `.env.local` 即可，该文件已被 git 忽略。

## 启动速度说明

旧项目使用 webpack，冷启动和热更新都比较慢。本项目改用 Vite：

- 开发时按需编译，启动只处理入口和当前访问的页面；
- 依赖预构建结果缓存在 `node_modules/.vite`，第二次启动基本秒开；
- `vite.config.js` 中配置了 `optimizeDeps.include` 和 `server.warmup`，提前处理常用依赖和页面。

如果依赖有变更导致缓存异常，删除 `node_modules/.vite` 后重新启动即可。

## 目录结构

```
src
├── api                 接口定义，按模块拆分
├── assets/styles       全局样式
├── config
│   ├── menu.js         左侧菜单 + 路由配置（新增页面在这里加一项）
│   └── setting.js      系统配置，读取 .env 环境变量
├── layout              主布局
│   └── components      侧边栏、顶部栏、修改密码弹窗
├── router              路由与登录守卫
├── stores              Pinia 状态（用户登录信息）
├── utils
│   ├── auth.js         本地登录信息存取
│   ├── crypto.js       DES 加解密
│   ├── http.js         常用请求方法
│   └── request.js      axios 实例、拦截器、统一错误提示
└── views
    ├── dashboard       首页
    ├── error           403 / 404 / 500
    ├── login           登录页
    └── placeholder     未开发页面的统一占位页
```

## 与后端对接

- 后端端口：`8098`
- 后端上下文路径：`/xiaolu`
- 开发环境由 Vite 代理 `/xiaolu` 到 `http://127.0.0.1:8098`，无需处理跨域
- 登录流程：
  1. `POST /open/getVerificationCode` 获取 `loginPasswordKey`
  2. 用该 key 对账号、密码做 DES 加密
  3. `POST /open/loginPc` 登录，成功后保存 `tokenValue`、`user`、`powerList`、`roleList`
- 登录后所有请求在请求头 `token` 中携带 token，由 Sa-Token 校验
- 后端统一返回 `{ success, msg, data, code, timestamp }`，请求封装已统一处理 401 和业务错误提示

## 新增页面

1. 在 `src/config/menu.js` 中新增菜单项，配置 `path`、`title`、`icon`；
2. 配置了 `component` 则直接使用对应页面，未配置则使用统一占位页；
3. 路由会自动生成，无需再改 `router/index.js`。

## 打包部署

```bash
npm run build
```

将 `dist/` 目录放到 `xiaolu-server.jar` 同级目录，后端会从 `${user.dir}/dist/` 加载前端静态资源，访问地址：

```
http://127.0.0.1:8098/xiaolu/index.html
```

前端使用 hash 路由，不需要后端额外配置 SPA 回退。