签入版本
This commit is contained in:
@@ -41,56 +41,69 @@ npm config set registry https://registry.npmmirror.com
|
||||
### `.env.development`（开发环境）
|
||||
|
||||
```bash
|
||||
# 服务端口
|
||||
# 只在开发模式中被载入
|
||||
VITE_PORT = 8001
|
||||
|
||||
# 公共基础路径
|
||||
# 网站根目录
|
||||
VITE_PUBLIC_PATH = /
|
||||
|
||||
# 代理配置（JSON 数组格式：[["前缀","目标地址"]]）
|
||||
VITE_PROXY = [["/api","http://admin.laravel13.naivevue/api"]]
|
||||
# 是否开启mock
|
||||
VITE_USE_MOCK = false
|
||||
|
||||
# API 接口基础路径（留空，由代理处理）
|
||||
# 网站前缀
|
||||
VITE_BASE_URL = /
|
||||
|
||||
# 是否删除console
|
||||
VITE_DROP_CONSOLE = true
|
||||
|
||||
# 跨域代理，可以配置多个，请注意不要换行
|
||||
VITE_PROXY=[["/api","http://admin.laravel13.naivevue/api"]]
|
||||
|
||||
# API 接口地址
|
||||
VITE_GLOB_API_URL =
|
||||
|
||||
# API 前缀
|
||||
# 图片上传地址
|
||||
VITE_GLOB_UPLOAD_URL =
|
||||
|
||||
# 图片前缀地址
|
||||
VITE_GLOB_IMG_URL =
|
||||
|
||||
# 接口前缀
|
||||
VITE_GLOB_API_URL_PREFIX = /api
|
||||
|
||||
# 上传接口地址
|
||||
VITE_GLOB_UPLOAD_URL = /api/upload
|
||||
|
||||
# 图片访问地址（附件域名，对应后端 FILE_DOMAIN_URL）
|
||||
VITE_GLOB_IMG_URL = http://file.laravel13.naivevue
|
||||
|
||||
# 是否启用 Mock 数据（false = 使用真实后端 API）
|
||||
VITE_USE_MOCK = false
|
||||
```
|
||||
|
||||
### `.env.production`（生产环境）
|
||||
|
||||
```bash
|
||||
# 公共基础路径
|
||||
# 是否开启mock
|
||||
VITE_USE_MOCK = false
|
||||
|
||||
# 网站根目录
|
||||
VITE_PUBLIC_PATH = /
|
||||
|
||||
# 是否在生产环境删除 console
|
||||
# 网站前缀
|
||||
VITE_BASE_URL = /
|
||||
|
||||
# 是否删除console
|
||||
VITE_DROP_CONSOLE = true
|
||||
|
||||
# API 接口基础路径（留空，由 Nginx 代理处理）
|
||||
# API
|
||||
VITE_GLOB_API_URL =
|
||||
|
||||
# API 前缀
|
||||
# 图片上传地址
|
||||
VITE_GLOB_UPLOAD_URL =
|
||||
|
||||
# 图片前缀地址
|
||||
VITE_GLOB_IMG_URL =
|
||||
|
||||
# 接口前缀
|
||||
VITE_GLOB_API_URL_PREFIX = /api
|
||||
|
||||
# 上传接口地址
|
||||
VITE_GLOB_UPLOAD_URL = /api/upload
|
||||
# 是否启用gzip压缩或brotli压缩
|
||||
# 可选: gzip | brotli | none
|
||||
VITE_BUILD_COMPRESS = 'none'
|
||||
|
||||
# 图片访问地址
|
||||
VITE_GLOB_IMG_URL = https://file.example.com
|
||||
|
||||
# 是否启用 gzip 压缩
|
||||
VITE_BUILD_COMPRESS = gzip
|
||||
|
||||
# 压缩后是否删除原文件
|
||||
# 使用压缩时是否删除原始文件，默认为false
|
||||
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
|
||||
```
|
||||
|
||||
@@ -109,7 +122,7 @@ npm run dev
|
||||
启动成功后会看到：
|
||||
|
||||
```text
|
||||
VITE v3.2.x ready in 1234 ms
|
||||
VITE v5.4.x ready in 1234 ms
|
||||
|
||||
➜ Local: http://localhost:8001/
|
||||
➜ Network: http://192.168.1.100:8001/
|
||||
@@ -117,31 +130,32 @@ npm run dev
|
||||
|
||||
## 步骤四：配置 API 代理
|
||||
|
||||
开发环境下，前端通过 Vite 代理将 `/api` 请求转发到后端服务。
|
||||
|
||||
在 `vite.config.ts` 中配置代理：
|
||||
开发环境下，前端通过 Vite 代理将 `/api` 请求转发到后端服务。代理规则由 `.env.development` 的 `VITE_PROXY` 驱动，`vite.config.ts` 只负责调用 `createProxy`：
|
||||
|
||||
```typescript
|
||||
// ui/vite.config.ts
|
||||
server: {
|
||||
port: 8001, // 开发服务器端口（对应 VITE_PORT）
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://admin.laravel13.naivevue/api', // 后端服务地址（对应 VITE_PROXY）
|
||||
changeOrigin: true, // 开启跨域（修改请求头的 Origin）
|
||||
rewrite: (path) => path, // 保持路径不变（不做路径替换）
|
||||
},
|
||||
},
|
||||
}
|
||||
host: true,
|
||||
port: VITE_PORT, // 端口来自 VITE_PORT（8001）
|
||||
proxy: createProxy(VITE_PROXY), // 解析 VITE_PROXY 生成代理规则
|
||||
},
|
||||
```
|
||||
|
||||
后端使用虚拟域名时（见 [2.2 Laragon 环境搭建](/zh/quickstart/laragon.html)），target 改为对应地址：
|
||||
`build/vite/proxy.ts` 为每个 `[前缀, 目标]` 生成一条代理规则：
|
||||
|
||||
```typescript
|
||||
target: 'http://admin.laravel13.naivevue/api',
|
||||
// createProxy 由 VITE_PROXY = [["/api","http://admin.laravel13.naivevue/api"]] 生成
|
||||
'/api': {
|
||||
target: 'http://admin.laravel13.naivevue/api', // 后端地址（Laragon 虚拟主机，见 2.2 Laragon 环境搭建）
|
||||
changeOrigin: true, // 修改请求头的 Origin
|
||||
ws: true, // 支持 WebSocket
|
||||
rewrite: (path) => path.replace(new RegExp('^/api'), ''), // 去掉 /api 前缀再转发
|
||||
},
|
||||
```
|
||||
|
||||
确保后端服务已启动（`php artisan serve`），然后访问 `http://localhost:8001`。
|
||||
需要切换后端地址时，直接修改 `.env.development` 中的 `VITE_PROXY`（改完重启 `pnpm dev` 生效），无需改动 `vite.config.ts`。
|
||||
|
||||
确保后端服务已启动（见 [2.3 后端服务启动](/zh/quickstart/backend-start.html)），然后访问 `http://localhost:8001`。
|
||||
|
||||
## 步骤五：验证前后端联调
|
||||
|
||||
@@ -192,12 +206,11 @@ pnpm install
|
||||
|
||||
### 2. 端口 8001 被占用
|
||||
|
||||
修改 `.env.development` 中的 `VITE_PORT` 或 `vite.config.ts` 中的 `server.port`：
|
||||
修改 `.env.development` 中的 `VITE_PORT`（`vite.config.ts` 的 `server.port` 由它驱动），改完重启 `pnpm dev`：
|
||||
|
||||
```typescript
|
||||
server: {
|
||||
port: 8002, // 改为其他端口（如 8002、8003 等）
|
||||
}
|
||||
```bash
|
||||
# .env.development
|
||||
VITE_PORT = 8002 # 改为其他端口（如 8002、8003 等）
|
||||
```
|
||||
|
||||
### 3. API 请求 404
|
||||
@@ -210,7 +223,7 @@ curl http://admin.laravel13.naivevue/api/captcha
|
||||
# → {"code":0,...} 即后端正常
|
||||
```
|
||||
|
||||
再检查 `vite.config.ts` 中 `proxy.target` 是否指向后端实际地址（改完需重启 `pnpm dev`）。
|
||||
再检查 `.env.development` 中 `VITE_PROXY` 的目标地址是否指向后端实际地址（改完需重启 `pnpm dev`）。
|
||||
|
||||
### 4. 登录报 401
|
||||
|
||||
|
||||
Reference in New Issue
Block a user