# 环境变量配置说明

## 概述

本项目使用 Vite 的环境变量功能来管理不同环境（开发、测试、生产）的配置。通过环境变量，可以灵活控制API地址、调试模式、功能开关等。

## 环境变量文件

### 1. `.env` - 基础配置
所有环境共享的基础配置
```bash
VITE_APP_TITLE=情绪博物馆
VITE_APP_VERSION=1.0.0
VITE_API_BASE_URL=/api
VITE_API_TIMEOUT=30000
VITE_APP_ENV=development
```

### 2. `.env.development` - 开发环境
```bash
VITE_APP_ENV=development
VITE_APP_TITLE=情绪博物馆(开发环境)
VITE_API_BASE_URL=/api
VITE_API_TARGET=http://localhost:9001
VITE_API_TIMEOUT=30000
VITE_DEBUG_MODE=true
VITE_MOCK_DATA=false
```

### 3. `.env.test` - 测试环境
```bash
VITE_APP_ENV=test
VITE_APP_TITLE=情绪博物馆(测试环境)
VITE_API_BASE_URL=https://test-api.emotion-museum.com/api
VITE_API_TARGET=https://test-api.emotion-museum.com
VITE_API_TIMEOUT=30000
VITE_DEBUG_MODE=true
VITE_MOCK_DATA=false
```

### 4. `.env.production` - 生产环境
```bash
VITE_APP_ENV=production
VITE_APP_TITLE=情绪博物馆
VITE_API_BASE_URL=https://api.emotion-museum.com/api
VITE_API_TARGET=https://api.emotion-museum.com
VITE_API_TIMEOUT=30000
VITE_DEBUG_MODE=false
VITE_MOCK_DATA=false
```

## 环境变量说明

| 变量名 | 说明 | 示例值 |
|--------|------|--------|
| `VITE_APP_TITLE` | 应用标题 | `情绪博物馆` |
| `VITE_APP_VERSION` | 应用版本 | `1.0.0` |
| `VITE_APP_ENV` | 环境标识 | `development/test/production` |
| `VITE_API_BASE_URL` | API基础路径 | `/api` 或完整URL |
| `VITE_API_TARGET` | API目标服务器 | `http://localhost:9001` |
| `VITE_API_TIMEOUT` | API超时时间(ms) | `30000` |
| `VITE_DEBUG_MODE` | 调试模式 | `true/false` |
| `VITE_MOCK_DATA` | 模拟数据开关 | `true/false` |

## 使用方法

### 1. 在代码中使用环境配置
```javascript
import { ENV_CONFIG, isDev, isTest, isProd, debugLog } from '@/config/env'

// 获取配置
console.log(ENV_CONFIG.APP_TITLE)
console.log(ENV_CONFIG.API_BASE_URL)

// 环境判断
if (isDev()) {
  // 开发环境逻辑
}

// 调试日志（只在DEBUG_MODE=true时输出）
debugLog('调试信息', data)
```

### 2. 运行不同环境

#### 开发环境
```bash
npm run dev          # 使用 .env.development
npm run dev:test     # 使用 .env.test
```

#### 构建不同环境
```bash
npm run build        # 生产环境构建
npm run build:test   # 测试环境构建
npm run build:dev    # 开发环境构建
```

#### 预览
```bash
npm run preview      # 预览生产环境构建
npm run preview:test # 预览测试环境构建
```

## 配置文件位置

- 环境配置: `src/config/env.js`
- API配置: `src/api/request.js`
- 使用示例: `src/utils/env-example.js`

## 注意事项

1. **环境变量必须以 `VITE_` 开头**才能在客户端代码中访问
2. **不要在环境变量中存储敏感信息**（如密钥、密码等）
3. **修改环境变量后需要重启开发服务器**
4. **生产环境的API地址需要根据实际部署情况修改**

## 自定义环境变量

如需添加新的环境变量：

1. 在相应的 `.env.*` 文件中添加变量（以 `VITE_` 开头）
2. 在 `src/config/env.js` 中添加对应的配置项
3. 在代码中通过 `ENV_CONFIG` 对象访问

示例：
```bash
# .env.development
VITE_FEATURE_NEW_UI=true
```

```javascript
// src/config/env.js
const getEnvConfig = () => {
  return {
    // ... 其他配置
    FEATURE_NEW_UI: import.meta.env.VITE_FEATURE_NEW_UI === 'true'
  }
}
```