# Admin 多环境配置说明

## 概述

Admin 端支持多种生产环境配置,可以在打包时灵活选择目标部署环境。

## 环境配置文件

| 文件 | 环境 | API 地址 | 说明 |
|------|------|----------|------|
| `.env` | 开发环境 | http://localhost:8081 | 本地开发使用 |
| `.env.prod` | 默认生产 | https://tral.cc | 原有生产环境 |
| `.env.prod-cn` | 中国区生产 | https://tral.cc | 中国区域部署 |
| `.env.prod-us` | 美国区生产 | https://us.tral.cc | 美国区域部署 |
| `.env.prod-eu` | 欧洲区生产 | https://eu.tral.cc | 欧洲区域部署 |

## 打包方式

### 方式一:使用 npm 命令

```bash
# 中国区
npm run build:prod-cn

# 美国区
npm run build:prod-us

# 欧洲区
npm run build:prod-eu

# 默认生产环境
npm run build:prod
```

### 方式二:使用交互式脚本 (推荐)

**Windows 系统:**
```bash
# 双击运行或在终端执行
build-select.bat
```

**Linux/Mac 系统:**
```bash
# 赋予执行权限
chmod +x build-select.sh

# 运行脚本
./build-select.sh
```

脚本会显示菜单让你选择要打包的目标环境:
```
========================================
  电商管理后台 - 多环境打包工具
========================================

请选择要打包的生产环境:

[1] 中国区 (prod-cn) - https://tral.cc
[2] 美国区 (prod-us) - https://us.tral.cc
[3] 欧洲区 (prod-eu) - https://eu.tral.cc
[4] 默认生产 (prod) - https://tral.cc

请输入选项 (1-4):
```

## 环境变量说明

所有环境配置文件都支持以下变量:

### API 配置
- `VITE_API_BASE_URL`: API 基础地址
- `VITE_API_TIMEOUT`: API 请求超时时间(毫秒)

### 应用配置
- `VITE_APP_TITLE`: 应用标题
- `VITE_APP_VERSION`: 应用版本
- `VITE_APP_ENV`: 当前环境标识

### 构建配置
- `VITE_BUILD_COMPRESS`: 构建压缩方式
- `VITE_BUILD_DROP_CONSOLE`: 是否移除 console
- `VITE_BUILD_DROP_DEBUGGER`: 是否移除 debugger

### 上传配置
- `VITE_UPLOAD_URL`: 上传接口地址
- `VITE_UPLOAD_MAX_SIZE`: 上传文件最大大小(字节)

### CDN 配置
- `VITE_CDN_URL`: CDN 地址

### 其他配置
- OSS、监控、缓存等第三方服务配置

## 如何添加新环境

1. 创建新的环境配置文件,如 `.env.prod-jp`:
```bash
# 日本区生产环境配置
NODE_ENV=production
VITE_API_BASE_URL=https://jp.tral.cc
VITE_APP_ENV=production-jp
# ... 其他配置
```

2. 在 `package.json` 中添加新的构建命令:
```json
{
  "scripts": {
    "build:prod-jp": "vite build --mode prod-jp"
  }
}
```

3. 更新 `build-select.bat` 和 `build-select.sh` 脚本,添加新选项

## 注意事项

1. **配置文件命名规则**: `.env.[mode]`，mode 要和 npm script 中的 `--mode` 参数一致
2. **敏感信息**: 不要在配置文件中提交真实的密钥和敏感信息
3. **环境变量前缀**: Vite 要求自定义环境变量必须以 `VITE_` 开头才能暴露给客户端
4. **代码中使用**: 通过 `import.meta.env.VITE_XXX` 访问环境变量

## 代码中使用环境变量示例

```javascript
// 获取 API 基础地址
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL

// 判断当前环境
const isProduction = import.meta.env.MODE === 'production'
const isProdCN = import.meta.env.VITE_APP_ENV === 'production-cn'
```