tmp

2026-06-12 09:00:45 +08:00
parent 18e7177560
commit 2014ec4b2b
756 changed files with 91998 additions and 1 deletions
--- a/ENV_CONFIG.md
+++ b/ENV_CONFIG.md
@@ -0,0 +1,200 @@
+# 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. **构建验证**：生产环境构建前务必在测试环境充分验证