签入版本
This commit is contained in:
小蚂蚁云
@@ -1,191 +1,57 @@
|
||||
# 2.3 前端服务启动
|
||||
# 2.5 前端服务启动
|
||||
|
||||
:::tip 概述
|
||||
本章指导您启动前端开发服务器，包括依赖安装、环境配置和 Vite 开发服务器启动。
|
||||
前端为独立 Vite 工程（`ui/`），开发端口 8001，`/api` 请求代理到后端 8000。前后端并行启动即可联调。
|
||||
:::
|
||||
|
||||
## 步骤一：安装依赖
|
||||
## 启动命令
|
||||
|
||||
```bash
|
||||
# 进入前端项目目录
|
||||
cd ui
|
||||
|
||||
# -----------------------------------------------------------------------------
|
||||
# 安装依赖（推荐 pnpm — 速度快、磁盘占用少）
|
||||
# -----------------------------------------------------------------------------
|
||||
# install → 从 pnpm-lock.yaml 精确安装所有依赖
|
||||
pnpm install
|
||||
|
||||
# 如果没有 pnpm，也可以使用 npm
|
||||
npm install
|
||||
pnpm install # 首次运行安装依赖
|
||||
pnpm dev # 启动开发服务器
|
||||
```
|
||||
|
||||
:::warning Node.js 版本
|
||||
前端项目要求 Node.js >= 18，推荐使用 22.x。可通过 `node -v` 检查版本。
|
||||
:::
|
||||
浏览器访问 `http://localhost:8001`。
|
||||
|
||||
## 步骤二：配置环境变量
|
||||
## 开发代理
|
||||
|
||||
前端有两个环境配置文件：
|
||||
|
||||
### `.env.development`（开发环境）
|
||||
|
||||
```bash
|
||||
# 服务端口
|
||||
VITE_PORT = 8001
|
||||
|
||||
# 公共基础路径
|
||||
VITE_PUBLIC_PATH = /
|
||||
|
||||
# 代理配置（JSON 数组格式：[["前缀","目标地址"]]）
|
||||
VITE_PROXY = [["/api","http://admin.thinkphp8.elevue/api"]]
|
||||
|
||||
# API 接口基础路径（留空，由代理处理）
|
||||
VITE_GLOB_API_URL =
|
||||
|
||||
# API 前缀
|
||||
VITE_GLOB_API_URL_PREFIX = /api
|
||||
|
||||
# 上传接口地址
|
||||
VITE_GLOB_UPLOAD_URL = /api/upload
|
||||
|
||||
# 图片访问地址
|
||||
VITE_GLOB_IMG_URL = http://file.thinkphp8.elevue
|
||||
|
||||
# 是否启用 Mock 数据（false = 使用真实后端 API）
|
||||
VITE_USE_MOCK = false
|
||||
```
|
||||
|
||||
### `.env.production`（生产环境）
|
||||
|
||||
```bash
|
||||
# 公共基础路径
|
||||
VITE_PUBLIC_PATH = /
|
||||
|
||||
# 是否在生产环境删除 console
|
||||
VITE_DROP_CONSOLE = true
|
||||
|
||||
# API 接口基础路径（留空，由 Nginx 代理处理）
|
||||
VITE_GLOB_API_URL =
|
||||
|
||||
# API 前缀
|
||||
VITE_GLOB_API_URL_PREFIX = /api
|
||||
|
||||
# 上传接口地址
|
||||
VITE_GLOB_UPLOAD_URL = /api/upload
|
||||
|
||||
# 图片访问地址
|
||||
VITE_GLOB_IMG_URL = http://file.thinkphp8.elevue
|
||||
|
||||
# 是否启用 gzip 压缩
|
||||
VITE_BUILD_COMPRESS = gzip
|
||||
|
||||
# 压缩后是否删除原文件
|
||||
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
|
||||
```
|
||||
|
||||
## 步骤三：启动开发服务器
|
||||
|
||||
```bash
|
||||
# -----------------------------------------------------------------------------
|
||||
# 启动 Vite 开发服务器（支持热更新 — 修改代码后浏览器自动刷新）
|
||||
# -----------------------------------------------------------------------------
|
||||
pnpm dev
|
||||
|
||||
# 或使用 npm
|
||||
npm run dev
|
||||
```
|
||||
|
||||
启动成功后会看到：
|
||||
`ui/.env.development` 配置了跨域代理：
|
||||
|
||||
```text
|
||||
VITE v3.2.x ready in 1234 ms
|
||||
|
||||
➜ Local: http://localhost:8001/
|
||||
➜ Network: http://192.168.1.100:8001/
|
||||
VITE_PROXY=[["/api", "http://127.0.0.1:8000/api"]]
|
||||
```
|
||||
|
||||
## 步骤四：配置 API 代理
|
||||
页面发起的 `/api/**` 请求由 Vite 转发到本地 8000 后端，开发期无需处理跨域。接口前缀由 `VITE_GLOB_API_URL_PREFIX=/api` 统一管理。
|
||||
|
||||
开发环境下，前端通过 Vite 代理将 `/api` 请求转发到后端服务。
|
||||
## 其他环境变量
|
||||
|
||||
在 `vite.config.ts` 中配置代理：
|
||||
| 键 | 说明 |
|
||||
|---|---|
|
||||
| VITE_PORT | 开发端口（8001） |
|
||||
| VITE_USE_MOCK | mock 开关（默认关闭） |
|
||||
| VITE_DROP_CONSOLE | 构建时移除 console |
|
||||
| VITE_BUILD_COMPRESS | 构建压缩方式（gzip / brotli / none） |
|
||||
|
||||
```typescript
|
||||
// ui/vite.config.ts
|
||||
server: {
|
||||
port: 8001, // 开发服务器端口（对应 VITE_PORT）
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://admin.thinkphp8.elevue/api', // 后端服务地址（对应 VITE_PROXY）
|
||||
changeOrigin: true, // 开启跨域（修改请求头的 Origin）
|
||||
rewrite: (path) => path, // 保持路径不变（不做路径替换）
|
||||
},
|
||||
},
|
||||
}
|
||||
```
|
||||
生产环境变量见 `ui/.env.production`。
|
||||
|
||||
确保后端服务已启动（`php think run`），然后访问 `http://localhost:8001`。
|
||||
|
||||
## 步骤五：验证前后端联调
|
||||
|
||||
1. 打开浏览器访问 `http://localhost:8001`
|
||||
2. 应该看到登录页面
|
||||
3. 输入默认账号 `admin` / `123456`
|
||||
4. 登录成功后进入控制台页面
|
||||
|
||||
:::tip 代理原理
|
||||
浏览器 → `http://localhost:8001/api/login` → Vite 代理 → `http://admin.thinkphp8.elevue/api/login` → 后端处理
|
||||
:::
|
||||
|
||||
## 构建生产版本
|
||||
## 常用命令
|
||||
|
||||
```bash
|
||||
# -----------------------------------------------------------------------------
|
||||
# 构建生产版本（Vite 会压缩代码、Tree-shaking、分包）
|
||||
# -----------------------------------------------------------------------------
|
||||
# build → 输出到 ui/dist/ 目录
|
||||
pnpm build
|
||||
|
||||
# -----------------------------------------------------------------------------
|
||||
# 预览构建结果（本地启动一个静态文件服务器预览 dist/ 内容）
|
||||
# -----------------------------------------------------------------------------
|
||||
pnpm preview
|
||||
pnpm dev # 开发
|
||||
pnpm build # 生产构建
|
||||
pnpm type:check # TypeScript 类型检查
|
||||
pnpm lint:eslint # ESLint 检查
|
||||
```
|
||||
|
||||
构建完成后，`ui/dist/` 目录包含可部署的静态文件。
|
||||
## 登录验证
|
||||
|
||||
## 常见问题
|
||||
前后端都启动后，访问前端登录页，用数据库内置账号登录。若后端未启动，页面接口会报代理失败——先确认后端 `/api/health` 正常。
|
||||
|
||||
### 1. `pnpm install` 报错
|
||||
## 前端登录方式
|
||||
|
||||
```bash
|
||||
# -----------------------------------------------------------------------------
|
||||
# 清除缓存重新安装（修复依赖冲突或缓存损坏）
|
||||
# -----------------------------------------------------------------------------
|
||||
# rm -rf → 递归强制删除（node_modules 和 lockfile）
|
||||
rm -rf node_modules pnpm-lock.yaml
|
||||
pnpm install
|
||||
```
|
||||
登录页内置四种表单：账号密码、手机验证码、扫码登录、注册。开发环境均可使用（验证码能力依赖后端 captcha 模块）。
|
||||
|
||||
### 2. 端口 8001 被占用
|
||||
## 下一步
|
||||
|
||||
修改 `.env.development` 中的 `VITE_PORT` 或 `vite.config.ts` 中的 `server.port`：
|
||||
|
||||
```typescript
|
||||
server: {
|
||||
port: 8002, // 改为其他端口（如 8002、8003 等）
|
||||
}
|
||||
```
|
||||
|
||||
### 3. API 请求 404
|
||||
|
||||
检查后端服务是否启动，以及代理配置是否正确：
|
||||
|
||||
```bash
|
||||
# 确认后端在运行（直接请求后端登录接口）
|
||||
# -X POST → POST 方法
|
||||
# -H → 设置 Content-Type 为 JSON
|
||||
# -d → 发送 JSON 请求体
|
||||
curl http://admin.thinkphp8.elevue/api/login -X POST -H "Content-Type: application/json" -d '{"username":"admin","password":"123456"}'
|
||||
```
|
||||
→ [2.6 第一个接口调试](/zh/quickstart/first-api.html)
|
||||
|
||||
Reference in New Issue
Block a user