happy-life-star/web/ENV_CONFIG.md

环境变量配置说明

概述

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

环境变量文件

1. .env - 基础配置

所有环境共享的基础配置

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 - 开发环境

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 - 测试环境

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 - 生产环境

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. 在代码中使用环境配置

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. 运行不同环境

开发环境

npm run dev          # 使用 .env.development
npm run dev:test     # 使用 .env.test

构建不同环境

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

预览

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 对象访问

示例：

# .env.development
VITE_FEATURE_NEW_UI=true

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