web_tcm/ENV_CONFIG.md

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

概述

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

环境模式

1. 开发环境 (Development)

特性：

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

配置文件： .env.development

启动命令：

npm run dev

---

2. 测试环境 (Test)

特性：

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

配置文件： .env.test

启动命令：

vite --mode test

---

3. 生产环境 (Production)

特性：

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

配置文件： .env.production

构建命令：

npm run build

预览构建结果：

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() - 错误信息（所有环境）

使用示例：

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() - 初始化性能监控

使用示例：

import performanceMonitor from '@/utils/performance'

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

---

使用说明

在代码中使用环境变量

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

使用 WebConfig

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. 构建验证：生产环境构建前务必在测试环境充分验证