签入版本

RXThinkCMF_Laravel13_AntdVue/zh/quickstart/frontend-start.md

@@ -1,7 +1,7 @@
 # 2.4 前端服务启动
 
 :::tip 概述
-本章指导您启动前端开发服务器，包括依赖安装、环境配置和 Vite 开发服务器启动。前端为本仓库 `ui/` 目录内的 EleVue 管理后台（Vue3 + ElementPlus）。
+本章指导您启动前端开发服务器，包括依赖安装、环境配置和 Vite 开发服务器启动。前端为本仓库 `ui/` 目录内的 AntdVue 管理后台（Vue3 + AntDesign）。
 :::
 
 ## 步骤一：安装依赖
@@ -42,13 +42,14 @@ npm config set registry https://registry.npmmirror.com
 
 ```bash
 # 服务端口
-VITE_PORT = 8001
+VITE_PORT = 8002
 
 # 公共基础路径
 VITE_PUBLIC_PATH = /
 
 # 代理配置（JSON 数组格式：[["前缀","目标地址"]]）
-VITE_PROXY = [["/api","http://localhost:8000/api"]]
+# 默认指向 Laragon 虚拟主机；直连 artisan serve 时改为 [["/api","http://admin.laravel13.antdvue/api"]]
+VITE_PROXY=[["/api","http://admin.laravel13.antdvue/api"]]
 
 # API 接口基础路径（留空，由代理处理）
 VITE_GLOB_API_URL =
@@ -56,11 +57,11 @@ VITE_GLOB_API_URL =
 # API 前缀
 VITE_GLOB_API_URL_PREFIX = /api
 
-# 上传接口地址
-VITE_GLOB_UPLOAD_URL = /api/upload
+# 上传接口地址（留空，走同域/代理）
+VITE_GLOB_UPLOAD_URL=
 
-# 图片访问地址（附件域名，对应后端 FILE_DOMAIN_URL）
-VITE_GLOB_IMG_URL = http://file.laravel13.elevue
+# 图片前缀地址（留空，按后端 FILE_DOMAIN_URL 解析）
+VITE_GLOB_IMG_URL=
 
 # 是否启用 Mock 数据（false = 使用真实后端 API）
 VITE_USE_MOCK = false
@@ -81,14 +82,14 @@ VITE_GLOB_API_URL =
 # API 前缀
 VITE_GLOB_API_URL_PREFIX = /api
 
-# 上传接口地址
-VITE_GLOB_UPLOAD_URL = /api/upload
+# 上传接口地址（留空，走同域）
+VITE_GLOB_UPLOAD_URL=
 
-# 图片访问地址
-VITE_GLOB_IMG_URL = https://file.example.com
+# 图片前缀地址（跨域部署时与后端 FILE_DOMAIN_URL 保持一致）
+VITE_GLOB_IMG_URL=
 
-# 是否启用 gzip 压缩
-VITE_BUILD_COMPRESS = gzip
+# 构建压缩方式：none / gzip / brotli（当前默认 none）
+VITE_BUILD_COMPRESS = 'none'
 
 # 压缩后是否删除原文件
 VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
@@ -111,8 +112,8 @@ npm run dev
 ```text
   VITE v3.2.x  ready in 1234 ms
 
-  ➜  Local:   http://localhost:8001/
-  ➜  Network: http://192.168.1.100:8001/
+  ➜  Local:   http://localhost:8002/
+  ➜  Network: http://192.168.1.100:8002/
 ```
 
 ## 步骤四：配置 API 代理
@@ -124,10 +125,10 @@ npm run dev
 ```typescript
 // ui/vite.config.ts
 server: {
-  port: 8001,                                // 开发服务器端口（对应 VITE_PORT）
+  port: 8002,                                // 开发服务器端口（对应 VITE_PORT）
   proxy: {
     '/api': {
-      target: 'http://localhost:8000/api',   // 后端服务地址（对应 VITE_PROXY）
+      target: 'http://admin.laravel13.antdvue/api',   // 后端服务地址（对应 VITE_PROXY）
       changeOrigin: true,                     // 开启跨域（修改请求头的 Origin）
       rewrite: (path) => path,                // 保持路径不变（不做路径替换）
     },
@@ -138,20 +139,20 @@ server: {
 后端使用虚拟域名时（见 [2.2 Laragon 环境搭建](/zh/quickstart/laragon.html)），target 改为对应地址：
 
 ```typescript
-target: 'http://admin.laravel13.elevue/api',
+target: 'http://admin.laravel13.antdvue/api',
 ```
 
-确保后端服务已启动（`php artisan serve`），然后访问 `http://localhost:8001`。
+确保后端服务已启动（`php artisan serve`），然后访问 `http://localhost:8002`。
 
 ## 步骤五：验证前后端联调
 
-1. 打开浏览器访问 `http://localhost:8001`
+1. 打开浏览器访问 `http://localhost:8002`
 2. 应该看到登录页面
 3. 输入默认账号 `admin` / `123456`
 4. 登录成功后进入控制台页面
 
 :::tip 代理原理
-浏览器 → `http://localhost:8001/api/login` → Vite 代理 → `http://localhost:8000/api/login` → 后端处理
+浏览器 → `http://localhost:8002/api/login` → Vite 代理 → `http://admin.laravel13.antdvue/api/login` → 后端处理
 
 代理方式下前端无需关心跨域；若改为直连后端（`VITE_GLOB_API_URL` 配置完整地址），则依赖后端 CORS 配置（`.env` 中 `CORS_ALLOW_ORIGIN`）。
 :::
@@ -190,7 +191,7 @@ rm -rf node_modules pnpm-lock.yaml
 pnpm install
 ```
 
-### 2. 端口 8001 被占用
+### 2. 端口 8002 被占用
 
 修改 `.env.development` 中的 `VITE_PORT` 或 `vite.config.ts` 中的 `server.port`：
 
@@ -206,7 +207,7 @@ server: {
 
 ```bash
 # 确认后端在运行（直接请求后端验证码接口）
-curl http://localhost:8000/api/captcha
+curl http://admin.laravel13.antdvue/api/captcha
 # → {"code":0,...} 即后端正常
 ```