签入版本
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
# 2.4 前端服务启动
|
||||
|
||||
:::tip 概述
|
||||
本章指导您启动前端开发服务器,包括依赖安装、环境配置和 Vite 开发服务器启动。前端为本仓库 `ui/` 目录内的 EleVue 管理后台(Vue3 + ElementPlus)。
|
||||
本章指导您启动前端开发服务器,包括依赖安装、环境配置和 Vite 开发服务器启动。前端为本仓库 `ui/` 目录内的 NaiveVue 管理后台(Vue3 + NaiveUI)。
|
||||
:::
|
||||
|
||||
## 步骤一:安装依赖
|
||||
@@ -48,7 +48,7 @@ VITE_PORT = 8001
|
||||
VITE_PUBLIC_PATH = /
|
||||
|
||||
# 代理配置(JSON 数组格式:[["前缀","目标地址"]])
|
||||
VITE_PROXY = [["/api","http://localhost:8000/api"]]
|
||||
VITE_PROXY = [["/api","http://admin.laravel13.naivevue/api"]]
|
||||
|
||||
# API 接口基础路径(留空,由代理处理)
|
||||
VITE_GLOB_API_URL =
|
||||
@@ -60,7 +60,7 @@ VITE_GLOB_API_URL_PREFIX = /api
|
||||
VITE_GLOB_UPLOAD_URL = /api/upload
|
||||
|
||||
# 图片访问地址(附件域名,对应后端 FILE_DOMAIN_URL)
|
||||
VITE_GLOB_IMG_URL = http://file.laravel13.elevue
|
||||
VITE_GLOB_IMG_URL = http://file.laravel13.naivevue
|
||||
|
||||
# 是否启用 Mock 数据(false = 使用真实后端 API)
|
||||
VITE_USE_MOCK = false
|
||||
@@ -127,7 +127,7 @@ server: {
|
||||
port: 8001, // 开发服务器端口(对应 VITE_PORT)
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8000/api', // 后端服务地址(对应 VITE_PROXY)
|
||||
target: 'http://admin.laravel13.naivevue/api', // 后端服务地址(对应 VITE_PROXY)
|
||||
changeOrigin: true, // 开启跨域(修改请求头的 Origin)
|
||||
rewrite: (path) => path, // 保持路径不变(不做路径替换)
|
||||
},
|
||||
@@ -138,7 +138,7 @@ server: {
|
||||
后端使用虚拟域名时(见 [2.2 Laragon 环境搭建](/zh/quickstart/laragon.html)),target 改为对应地址:
|
||||
|
||||
```typescript
|
||||
target: 'http://admin.laravel13.elevue/api',
|
||||
target: 'http://admin.laravel13.naivevue/api',
|
||||
```
|
||||
|
||||
确保后端服务已启动(`php artisan serve`),然后访问 `http://localhost:8001`。
|
||||
@@ -151,7 +151,7 @@ target: 'http://admin.laravel13.elevue/api',
|
||||
4. 登录成功后进入控制台页面
|
||||
|
||||
:::tip 代理原理
|
||||
浏览器 → `http://localhost:8001/api/login` → Vite 代理 → `http://localhost:8000/api/login` → 后端处理
|
||||
浏览器 → `http://localhost:8001/api/login` → Vite 代理 → `http://admin.laravel13.naivevue/api/login` → 后端处理
|
||||
|
||||
代理方式下前端无需关心跨域;若改为直连后端(`VITE_GLOB_API_URL` 配置完整地址),则依赖后端 CORS 配置(`.env` 中 `CORS_ALLOW_ORIGIN`)。
|
||||
:::
|
||||
@@ -206,7 +206,7 @@ server: {
|
||||
|
||||
```bash
|
||||
# 确认后端在运行(直接请求后端验证码接口)
|
||||
curl http://localhost:8000/api/captcha
|
||||
curl http://admin.laravel13.naivevue/api/captcha
|
||||
# → {"code":0,...} 即后端正常
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user