# WebUI 环境配置说明（简化版）

## 概述

项目支持三种环境模式：开发环境（development）、测试环境（test）和生产环境（production）。通过环境变量文件自动区分不同配置。

## 环境模式

### 1. 开发环境 (Development)

**特性：**
- 热模块替换（HMR）
- Vue DevTools 调试工具
- Source Map 支持
- 完整日志输出（debug 级别）

**配置文件：** `.env.development`

**启动命令：**
```bash
npm run dev
```

---

### 2. 测试环境 (Test)

**特性：**
- 热模块替换（HMR）
- Source Map 支持
- Vue DevTools 调试工具
- 完整日志输出（debug 级别）

**配置文件：** `.env.test`

**启动命令：**
```bash
vite --mode test
```

---

### 3. 生产环境 (Production)

**特性：**
- 代码压缩（Terser）
- 移除 console 日志和 debugger
- 资源优化和代码分割
- 禁用 Source Map
- 仅错误级别日志

**配置文件：** `.env.production`

**构建命令：**
```bash
npm run build
```

**预览构建结果：**
```bash
npm run preview
```

---

## 环境变量

| 变量名 | 说明 | 开发环境 | 测试环境 | 生产环境 |
|--------|------|----------|----------|----------|
| VITE_APP_TITLE | 应用标题 | EIOT Web UI (Development) | EIOT Web UI (Testing) | EIOT Web UI |
| VITE_API_BASE_URL | API 基础地址 | http://127.0.0.1:9001/ | http://test-api.eiot.com/ | http://www.huashengtec.com:9001/ |
| VITE_APP_ENV | 环境标识 | development | test | production |
| VITE_ENABLE_DEVTOOLS | 是否启用 DevTools | true | true | false |
| VITE_ENABLE_SOURCE_MAP | 是否生成 Source Map | true | true | false |
| VITE_LOG_LEVEL | 日志级别 | debug | debug | error |

---

## 工具类

### Logger (日志工具)

位置：`src/utils/logger.js`

根据环境配置自动过滤日志级别：
- `debug()` - 调试信息（仅开发/测试环境）
- `info()` - 一般信息（仅开发/测试环境）
- `warn()` - 警告信息（所有环境）
- `error()` - 错误信息（所有环境）

使用示例：
```javascript
import logger from '@/utils/logger'

logger.debug('调试信息')
logger.info('一般信息')
logger.warn('警告信息')
logger.error('错误信息')
```

### Performance Monitor (性能监控)

位置：`src/utils/performance.js`

提供性能监控功能（仅生产环境启用）：
- `startTimer(name)` - 开始计时
- `endTimer(name)` - 结束计时并记录
- `getMetrics()` - 获取所有性能指标
- `init()` - 初始化性能监控

使用示例：
```javascript
import performanceMonitor from '@/utils/performance'

performanceMonitor.startTimer('api-request')
await fetchData()
performanceMonitor.endTimer('api-request')
```

---

## 使用说明

### 在代码中使用环境变量

```javascript
const apiUrl = import.meta.env.VITE_API_BASE_URL
const isDev = import.meta.env.VITE_APP_ENV === 'development'
```

### 使用 WebConfig

```javascript
import WebConfig from '@/utils/config'

console.log(WebConfig.HOST_BASE_URL)
console.log(WebConfig.APP_ENV)
console.log(WebConfig.LOG_LEVEL)
```

---

## 配置优化说明

### 简化内容

1. **vite.config.js** - 移除冗余配置项：
   - 移除 `define` 配置（直接使用 `import.meta.env`）
   - 移除 `css.preprocessorOptions.scss`（未使用）
   - 移除 `optimizeDeps`（Vite 自动处理）
   - 移除 `esbuild.drop`（已通过 Terser 处理）
   - 移除默认的 `target`、`outDir`、`assetsDir`
   - 移除 `chunkSizeWarningLimit`、`reportCompressedSize`
   - 移除 `server.strictPort`、`server.watch`
   - 简化环境判断逻辑

2. **logger.js** - 简化为函数对象：
   - 移除类定义，改为简洁的对象字面量
   - 简化日志级别判断逻辑
   - 使用短路运算符优化条件判断

3. **performance.js** - 简化为函数对象：
   - 移除类定义，改为简洁的对象字面量
   - 移除未使用的 `mark()` 和 `measure()` 方法
   - 移除 Web Vitals 监控（复杂度高，收益低）
   - 合并页面加载和资源监控逻辑

4. **package.json** - 简化脚本命令：
   - 移除 `--mode` 参数（Vite 自动根据命令选择环境）
   - 移除冗余的 `dev:test`、`build:test` 等命令
   - 保留核心命令：`dev`、`build`、`preview`

### 保持的功能

- ✅ 开发环境热重载
- ✅ Vue DevTools 调试工具
- ✅ Source Map 支持
- ✅ 生产环境代码压缩
- ✅ 生产环境移除 console 和 debugger
- ✅ 代码分割优化
- ✅ 日志级别控制
- ✅ 性能监控（生产环境）

---

## 开发建议

1. **日常开发**：使用 `npm run dev` 启动开发服务器
2. **功能测试**：使用 `vite --mode test` 连接测试环境
3. **部署前**：使用 `npm run build` 构建生产版本
4. **预览构建**：使用 `npm run preview` 预览生产构建结果

---

## 注意事项

1. **敏感信息**：不要在 `.env.*` 文件中存储敏感信息
2. **Git 忽略**：`.env.local` 文件已添加到 `.gitignore`
3. **环境切换**：修改环境变量后需要重启开发服务器
4. **构建验证**：生产环境构建前务必在测试环境充分验证