58 lines
1.5 KiB
Markdown
58 lines
1.5 KiB
Markdown
# 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)
|