201 lines
5.0 KiB
Markdown
201 lines
5.0 KiB
Markdown
# 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. **构建验证**：生产环境构建前务必在测试环境充分验证
|