2025-09-12 21:53:14 +08:00
|
|
|
|
# 环境变量配置说明
|
|
|
|
|
|
|
|
|
|
|
|
## 概述
|
|
|
|
|
|
本项目支持通过环境变量配置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代理 |
|
|
|
|
|
|
|
|
|
|
|
|
### 百度地图配置
|
|
|
|
|
|
| 变量名 | 默认值 | 说明 |
|
|
|
|
|
|
|--------|--------|------|
|
2025-11-04 09:43:23 +08:00
|
|
|
|
| `VITE_BAIDU_MAP_API_KEY` | `fLz8UwJSM3ayYl6dtsWYp7TQ8993R6kC` | 百度地图API密钥 |
|
2025-09-12 21:53:14 +08:00
|
|
|
|
|
|
|
|
|
|
### 应用配置
|
|
|
|
|
|
| 变量名 | 默认值 | 说明 |
|
|
|
|
|
|
|--------|--------|------|
|
|
|
|
|
|
| `VITE_APP_TITLE` | `宁夏智慧养殖监管平台` | 应用标题 |
|
|
|
|
|
|
| `VITE_APP_VERSION` | `1.0.0` | 应用版本 |
|
|
|
|
|
|
|
|
|
|
|
|
## 环境配置文件
|
|
|
|
|
|
|
|
|
|
|
|
### 开发环境 (.env.development)
|
|
|
|
|
|
```bash
|
|
|
|
|
|
# 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)
|
|
|
|
|
|
```bash
|
|
|
|
|
|
# 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. 创建环境文件
|
|
|
|
|
|
```bash
|
|
|
|
|
|
# 复制示例文件
|
|
|
|
|
|
cp .env.example .env.development
|
|
|
|
|
|
cp .env.example .env.production
|
|
|
|
|
|
|
|
|
|
|
|
# 编辑配置文件
|
|
|
|
|
|
vim .env.development
|
|
|
|
|
|
vim .env.production
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### 2. 在代码中使用
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
// 在组件中使用环境变量
|
|
|
|
|
|
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工具使用
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
// 使用代理模式(推荐)
|
|
|
|
|
|
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`
|
|
|
|
|
|
- 检查后端服务端口是否正确
|