# LQAdminFront 本地构建指南

## 概述

本项目支持多环境构建，包括开发环境（development）、测试环境（test）和生产环境（production）。每个环境都有独立的配置文件和构建输出目录。

## 环境配置文件

| 环境 | 配置文件 | 说明 |
|------|----------|------|
| 开发环境 | `.env.development` | 本地开发使用 |
| 测试环境 | `.env.test` | 测试服务器使用 |
| 生产环境 | `.env.prod` / `.env.production` | 生产服务器使用 |

## 快速开始


# 使用 nvm 管理 Node.js 版本
# 安装并切换到 LTS 版本
nvm install 18.18.0  # 或 20.9.0
nvm use 18.18.0

# 验证 Node.js 版本
node --version  # 应该显示 v18.18.0 或类似

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
# 开发环境
npm run dev

# 测试环境
npm run dev:test

# 生产环境
npm run dev:prod
```

## 构建命令

### 基础构建命令

```bash
# 开发环境构建 "build:dev": "vue-tsc && vite build --mode development",

npm run build:dev

# 测试环境构建
npm run build:test

# 生产环境构建
npm run build:prod

# 构建所有环境
npm run build:all
```

### 使用构建脚本（推荐）

#### Linux/Mac 用户

```bash
# 开发环境
./scripts/build-dev.sh

# 测试环境
./scripts/build-test.sh

# 生产环境
./scripts/build-prod.sh
```

#### Windows 用户

```cmd
# 开发环境
scripts\build-dev.bat

# 测试环境
scripts\build-test.bat

# 生产环境
scripts\build-prod.bat
```

## 构建输出

每个环境的构建文件会输出到不同的目录：

- 开发环境：`dist-development/`
- 测试环境：`dist-test/`
- 生产环境：`dist-production/`

## 预览构建结果

```bash
# 预览开发环境构建
npm run preview:dev

# 预览测试环境构建
npm run preview:test

# 预览生产环境构建
npm run preview:prod
```

## 代码质量检查

```bash
# 代码格式化
npm run format

# ESLint 检查和修复
npm run lint

# TypeScript 类型检查
npm run type-check

# 清理构建文件
npm run clean
```

## 构建优化

### 开发环境
- 包含 sourcemap
- 不压缩代码
- 保留 console 和 debugger

### 测试环境
- 包含 sourcemap
- 轻度压缩
- 保留 console 用于调试

### 生产环境
- 不包含 sourcemap
- 完全压缩和混淆
- 移除 console 和 debugger
- 启用代码分割和优化

## 环境变量说明

### 通用变量

- `VITE_APP_TITLE`: 应用标题
- `VITE_APP_ENV`: 当前环境
- `VITE_APP_DEBUG`: 是否启用调试模式
- `VITE_API_BASE_URL`: API 基础地址
- `VITE_OAUTH_CLIENT_ID`: OAuth 客户端 ID
- `VITE_OAUTH_REDIRECT_URI`: OAuth 重定向地址

### 功能开关

- `VITE_ENABLE_MOCK`: 是否启用 Mock 数据
- `VITE_ENABLE_CONSOLE_LOG`: 是否启用控制台日志
- `VITE_ENABLE_ERROR_REPORT`: 是否启用错误报告

## 部署说明

### 开发环境部署

1. 执行构建：`npm run build:dev`
2. 将 `dist-development/` 目录内容部署到开发服务器

### 测试环境部署

1. 执行构建：`npm run build:test`
2. 将 `dist-test/` 目录内容部署到测试服务器

### 生产环境部署

1. 执行构建：`npm run build:prod`
2. 将 `dist-production/` 目录内容部署到生产服务器

## Docker 构建

如果需要使用 Docker 构建，请参考 `DOCKER_DEPLOYMENT.md` 文档。

## 故障排除

### 构建失败

1. 检查 Node.js 版本（推荐 16+）
2. 清理依赖：`rm -rf node_modules package-lock.json && npm install`
3. 清理构建缓存：`npm run clean`

### 类型检查错误

```bash
# 单独运行类型检查
npm run type-check
```

### 代码格式问题

```bash
# 自动修复格式问题
npm run format
npm run lint
```

## 性能优化建议

1. 使用 `npm run build:analyze` 分析构建包大小
2. 合理配置代码分割
3. 优化图片和静态资源
4. 启用 gzip 压缩（服务器配置）

## 注意事项

1. 不同环境的配置文件请根据实际情况修改
2. 生产环境的敏感信息（如 API 密钥）请通过环境变量或配置中心管理
3. 构建前请确保代码已通过所有检查（lint、type-check）
4. 建议在 CI/CD 流程中集成构建和部署流程