nxxmdata/admin-system/ENV_CONFIG.md

环境变量配置说明

概述

本项目支持通过环境变量配置API地址和其他配置项，实现开发、测试、生产环境的灵活切换。

环境变量列表

API配置

变量名	默认值	说明
VITE_API_BASE_URL	/api	API基础路径（相对路径，通过代理转发）
VITE_API_FULL_URL	http://localhost:5350/api	完整API地址（直接调用）
VITE_API_TIMEOUT	10000	请求超时时间（毫秒）
VITE_USE_PROXY	true	是否使用Vite代理

百度地图配置

变量名	默认值	说明
VITE_BAIDU_MAP_API_KEY	fLz8UwJSM3ayYl6dtsWYp7TQ8993R6kC	百度地图API密钥

应用配置

变量名	默认值	说明
VITE_APP_TITLE	宁夏智慧养殖监管平台	应用标题
VITE_APP_VERSION	1.0.0	应用版本

环境配置文件

开发环境 (.env.development)

# API配置
VITE_API_BASE_URL=/api
VITE_API_FULL_URL=http://localhost:5350/api
VITE_API_TIMEOUT=10000
VITE_USE_PROXY=true

# 百度地图API
VITE_BAIDU_MAP_API_KEY=your_baidu_map_api_key

# 应用配置
VITE_APP_TITLE=宁夏智慧养殖监管平台
VITE_APP_VERSION=1.0.0

生产环境 (.env.production)

# API配置
VITE_API_BASE_URL=/api
VITE_API_FULL_URL=https://your-domain.com/api
VITE_API_TIMEOUT=15000
VITE_USE_PROXY=false

# 百度地图API
VITE_BAIDU_MAP_API_KEY=your_production_baidu_map_api_key

# 应用配置
VITE_APP_TITLE=宁夏智慧养殖监管平台
VITE_APP_VERSION=1.0.0

使用方法

1. 创建环境文件

# 复制示例文件
cp .env.example .env.development
cp .env.example .env.production

# 编辑配置文件
vim .env.development
vim .env.production

2. 在代码中使用

// 在组件中使用环境变量
import { API_CONFIG } from '@/config/env.js'

// 获取API基础URL
const apiUrl = API_CONFIG.baseUrl

// 获取完整API URL
const fullApiUrl = API_CONFIG.fullBaseUrl

// 检查是否为开发环境
if (API_CONFIG.isDev) {
  console.log('开发环境')
}

3. API工具使用

// 使用代理模式（推荐）
import { api } from '@/utils/api'
const result = await api.get('/farms')

// 使用直接调用模式
import { directApi } from '@/utils/api'
const result = await directApi.get('/farms')

配置优先级

1. 环境变量文件 (.env.development, .env.production)
2. 默认配置 (env.js)
3. 硬编码默认值

注意事项

1. 环境变量必须以 VITE_ 开头，才能在客户端代码中访问
2. 生产环境建议使用HTTPS，确保安全性
3. API密钥不要提交到版本控制系统，使用环境变量管理
4. 代理模式适用于开发环境，生产环境建议使用直接调用
5. 修改环境变量后需要重启开发服务器

故障排除

1. 环境变量不生效

• 检查变量名是否以 VITE_ 开头
• 确认环境文件位置正确
• 重启开发服务器

2. API请求失败

• 检查 VITE_API_FULL_URL 配置是否正确
• 确认后端服务是否启动
• 检查网络连接

3. 代理不工作

• 检查 vite.config.js 中的代理配置
• 确认 VITE_USE_PROXY 设置为 true
• 检查后端服务端口是否正确