# 环境配置说明

## 问题背景

Vite 的 proxy 代理功能只在 **H5 开发环境** 下生效，对于 App、微信小程序、鸿蒙等平台不支持代理，必须直接使用真实域名。

## 解决方案

通过环境变量 + 条件编译的方式，实现不同平台使用不同的 API 地址。

## 配置文件说明

### 1. 环境变量文件

- **`.env`** - 默认配置（所有环境的基础配置）
- **`.env.development`** - 开发环境配置
- **`.env.production`** - 生产环境配置

### 2. 各平台 API 地址规则

| 平台 | 环境 | API 地址 | 说明 |
|------|------|----------|------|
| H5 | 开发 | `/base` | 通过 Vite proxy 代理到 `http://localhost:8080` |
| H5 | 生产 | `https://nxy.gbdfarm.com:9000/pro-uniapp` | 真实域名 |
| 小程序 | 所有 | `https://nxy.gbdfarm.com:9000/pro-uniapp` | 真实域名 |
| App | 所有 | `https://nxy.gbdfarm.com:9000/pro-uniapp` | 真实域名 |
| 鸿蒙 | 所有 | `https://nxy.gbdfarm.com:9000/pro-uniapp` | 真实域名 |

## 工作原理

### H5 开发环境
```javascript
// 请求: /base/api/user/info
// ↓ Vite proxy 转发
// 实际请求: http://localhost:8080/api/user/info
```

### 其他平台或生产环境
```javascript
// 请求: https://nxy.gbdfarm.com:9000/pro-uniapp/api/user/info
// ↓ 直接请求
// 实际请求: https://nxy.gbdfarm.com:9000/pro-uniapp/api/user/info
```

## 如何使用

### 开发环境

1. **H5 开发**
   ```bash
   npm run dev:h5
   ```
   自动使用 `/base` 代理路径

2. **小程序/App/鸿蒙开发**
   ```bash
   npm run dev:mp-weixin  # 微信小程序
   npm run dev:app        # App
   ```
   自动使用真实域名

### 生产环境

```bash
npm run build:h5           # H5 生产
npm run build:mp-weixin    # 微信小程序生产
npm run build:app          # App 生产
```

所有平台都使用真实域名

## 修改配置

如需修改 API 地址，编辑对应的环境变量文件：

### 修改开发环境地址
编辑 `.env.development`：
```env
VITE_BASE_URL=/base
VITE_UPLOAD_URL=http://nxy.gbdfarm.com
```

### 修改生产环境地址
编辑 `.env.production`：
```env
VITE_BASE_URL=https://nxy.gbdfarm.com:9000/pro-uniapp
VITE_UPLOAD_URL=https://nxy.gbdfarm.com
```

## 注意事项

1. **环境变量必须以 `VITE_` 开头**才能在代码中访问
2. **修改环境变量后需要重启开发服务器**
3. **小程序/App 不支持 proxy**，开发时也会直接请求真实域名
4. **确保后端服务器配置了 CORS**，允许跨域请求

## 技术实现

### config/api.js
使用条件编译判断平台：
```javascript
// #ifdef H5
const isH5 = true;
// #endif
// #ifndef H5
const isH5 = false;
// #endif

const dev = {
  serve: isH5 ? "/base" : "https://nxy.gbdfarm.com:9000/pro-uniapp",
  upload: import.meta.env.VITE_UPLOAD_URL
};
```

### vite.config.js
配置 H5 开发环境代理：
```javascript
server: {
  proxy: {
    '/base': {
      target: 'http://localhost:8080',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/base/, ''),
    },
  },
}
```

## 常见问题

### Q: 为什么小程序开发时不能用 proxy？
A: 小程序运行在微信客户端，不是浏览器环境，无法使用 Vite 的开发服务器代理功能。

### Q: 如何在本地调试小程序？
A: 需要启动本地后端服务，或者使用内网穿透工具（如 ngrok）将本地服务暴露到公网。

### Q: 环境变量不生效怎么办？
A: 
1. 检查变量名是否以 `VITE_` 开头
2. 重启开发服务器
3. 清除缓存后重新构建

## 相关文件

- `vite.config.js` - Vite 配置文件（包含 proxy 配置）
- `config/api.js` - API 地址配置
- `utils/request.js` - 请求拦截器
- `.env` - 默认环境变量
- `.env.development` - 开发环境变量
- `.env.production` - 生产环境变量