135 lines
3.2 KiB
Markdown
135 lines
3.2 KiB
Markdown
|
# 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'
|
|||
|
|
```
|