# 2.5 前端服务启动

:::tip 概述
前端为独立 Vite 工程（`ui/`），开发端口 8001，`/api` 请求代理到后端 8000。前后端并行启动即可联调。
:::

## 启动命令

```bash
cd ui
pnpm install    # 首次运行安装依赖
pnpm dev        # 启动开发服务器
```

浏览器访问 `http://localhost:8001`。

## 开发代理

`ui/.env.development` 配置了跨域代理：

```text
VITE_PROXY=[["/api", "http://127.0.0.1:8000/api"]]
```

页面发起的 `/api/**` 请求由 Vite 转发到本地 8000 后端，开发期无需处理跨域。接口前缀由 `VITE_GLOB_API_URL_PREFIX=/api` 统一管理。

## 其他环境变量

| 键 | 说明 |
|---|---|
| VITE_PORT | 开发端口（8001） |
| VITE_USE_MOCK | mock 开关（默认关闭） |
| VITE_DROP_CONSOLE | 构建时移除 console |
| VITE_BUILD_COMPRESS | 构建压缩方式（gzip / brotli / none） |

生产环境变量见 `ui/.env.production`。

## 常用命令

```bash
pnpm dev             # 开发
pnpm build           # 生产构建
pnpm type:check      # TypeScript 类型检查
pnpm lint:eslint     # ESLint 检查
```

## 登录验证

前后端都启动后，访问前端登录页，用数据库内置账号登录。若后端未启动，页面接口会报代理失败——先确认后端 `/api/health` 正常。

## 前端登录方式

登录页内置四种表单：账号密码、手机验证码、扫码登录、注册。开发环境均可使用（验证码能力依赖后端 captcha 模块）。

## 下一步

→ [2.6 第一个接口调试](/zh/quickstart/first-api.html)