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 或类似

安装依赖

npm install

开发模式

# 开发环境
npm run dev

# 测试环境
npm run dev:test

# 生产环境
npm run dev:prod

构建命令

基础构建命令

# 开发环境构建 "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 用户

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

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

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

Windows 用户

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

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

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

构建输出

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

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

预览构建结果

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

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

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

代码质量检查

# 代码格式化
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: 是否启用错误报告

部署说明

开发环境部署

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

测试环境部署

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

生产环境部署

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

Docker 构建

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

故障排除

构建失败

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

类型检查错误

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

代码格式问题

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

性能优化建议

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

注意事项

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

BUILD_GUIDE.md 4.1 KB Историја Датотека