141 lines
3.5 KiB
Markdown
141 lines
3.5 KiB
Markdown
# 环境变量配置说明
|
|
|
|
## 概述
|
|
|
|
本项目使用 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'
|
|
}
|
|
}
|
|
```
|