Kaynağa Gözat

前端增加本地环境dev-local

lingmin_package@163.com 1 ay önce
ebeveyn
işleme
0d62e15d0e
7 değiştirilmiş dosya ile 55 ekleme ve 355 silme
  1. 1 1
      .env.dev
  2. 23 0
      .env.dev-local
  3. 0 220
      BUILD_GUIDE.md
  4. 26 0
      README.md
  5. 0 132
      README_DOCKER.md
  6. 2 0
      package.json
  7. 3 2
      vite.config.ts

+ 1 - 1
.env.dev

@@ -1,7 +1,7 @@
 # 开发环境配置
 VITE_APP_TITLE=管理平台 - 开发环境
 VITE_API_BASE_URL=http://192.168.92.61
-VITE_APP_ENV=development
+VITE_APP_ENV=dev
 VITE_APP_DEBUG=true
 
 # 后端服务地址

+ 23 - 0
.env.dev-local

@@ -0,0 +1,23 @@
+# 开发环境配置
+VITE_APP_TITLE=管理平台 - 开发环境
+VITE_API_BASE_URL=http://localhost:8000
+VITE_APP_ENV=dev-local
+VITE_APP_DEBUG=true
+
+# 后端服务地址
+VITE_BACKEND_HOST=localhost
+VITE_BACKEND_PORT=8000
+VITE_BACKEND_PROTOCOL=http
+
+# OAuth 配置
+VITE_OAUTH_CLIENT_ID=eqhoIdAyAWbA8MsYHsNqQqNLJbCayTjY
+VITE_OAUTH_REDIRECT_URI=http://localhost:3000/callback
+
+# 功能开关
+VITE_ENABLE_MOCK=false
+VITE_ENABLE_CONSOLE_LOG=true
+VITE_ENABLE_ERROR_REPORT=false
+
+# 其他配置
+VITE_REQUEST_TIMEOUT=10000
+VITE_UPLOAD_MAX_SIZE=5242880

+ 0 - 220
BUILD_GUIDE.md

@@ -1,220 +0,0 @@
-# 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 流程中集成构建和部署流程

+ 26 - 0
README.md

@@ -0,0 +1,26 @@
+# LQAdminFront 快速启动指南
+
+## 🚀 快速开始
+
+### 1. 构建镜像
+
+```bash
+# 进入前端项目目录
+cd LQAdminFront
+
+
+npm run dev-local
+### 3. 访问应用
+
+- **开发环境**: http://localhost:3000
+- **测试环境**: http://localhost:3001  
+- **生产环境**: http://localhost
+
+## 📁 文件说明
+
+| 文件 | 说明 |
+|------|------|
+| `.env.dev-local` | 本地开发环境配置 |
+| `.env.dev`       | 开发测试环境配置 |
+| `.env.test`      | 测试环境配置 |
+| `.env.prod`      | 生产环境配置 |

+ 0 - 132
README_DOCKER.md

@@ -1,132 +0,0 @@
-# LQAdminFront Docker 快速启动指南
-
-## 🚀 快速开始
-
-### 1. 构建镜像
-
-```bash
-# 进入前端项目目录
-cd LQAdminFront
-
-# 给构建脚本执行权限(Linux/Mac)
-chmod +x build.sh
-
-# 构建开发环境镜像
-./build.sh -e dev
-
-# 构建生产环境镜像
-./build.sh -e prod -t v1.0.0
-```
-
-### 2. 运行容器
-
-```bash
-# 开发环境 (端口 3000)
-docker-compose --profile dev up -d
-
-# 测试环境 (端口 3001)
-docker-compose --profile test up -d
-
-# 生产环境 (端口 80)
-docker-compose --profile prod up -d
-```
-
-### 3. 访问应用
-
-- **开发环境**: http://localhost:3000
-- **测试环境**: http://localhost:3001  
-- **生产环境**: http://localhost
-
-## 📁 文件说明
-
-| 文件 | 说明 |
-|------|------|
-| `Dockerfile` | Docker 镜像构建文件 |
-| `docker-compose.yml` | Docker Compose 配置 |
-| `nginx.conf` | Nginx 服务器配置 |
-| `docker-entrypoint.sh` | 容器启动脚本 |
-| `build.sh` | 自动化构建脚本 |
-| `.env.dev` | 开发环境配置 |
-| `.env.test` | 测试环境配置 |
-| `.env.prod` | 生产环境配置 |
-
-## 🔧 环境配置
-
-### 开发环境
-- API地址: `http://localhost:8000`
-- 调试模式: 开启
-- 热重载: 支持
-
-### 测试环境  
-- API地址: `http://test-api.example.com`
-- 调试模式: 开启
-- 错误报告: 开启
-
-### 生产环境
-- API地址: `https://api.yourdomain.com`
-- 调试模式: 关闭
-- 性能优化: 开启
-
-## 🛠 自定义配置
-
-### 修改后端地址
-
-```bash
-# 方式1: 修改环境文件
-vim .env.prod
-
-# 方式2: 运行时指定环境变量
-docker run -p 80:80 \
-  -e VITE_API_BASE_URL=https://your-api.com \
-  lqadmin-frontend:prod
-```
-
-### 修改应用标题
-
-```bash
-docker run -p 80:80 \
-  -e VITE_APP_TITLE="您的应用名称" \
-  lqadmin-frontend:prod
-```
-
-## 📊 监控和调试
-
-```bash
-# 查看容器状态
-docker ps
-
-# 查看容器日志
-docker logs lqadmin-frontend-prod
-
-# 进入容器调试
-docker exec -it lqadmin-frontend-prod sh
-
-# 健康检查
-curl http://localhost/health
-```
-
-## 🔄 更新部署
-
-```bash
-# 1. 重新构建镜像
-./build.sh -e prod -t v1.0.1
-
-# 2. 停止旧容器
-docker-compose --profile prod down
-
-# 3. 启动新容器
-docker-compose --profile prod up -d
-```
-
-## ❓ 常见问题
-
-### Q: 容器启动失败?
-A: 检查端口是否被占用,查看容器日志排查问题
-
-### Q: API 请求失败?
-A: 确认后端服务是否正常,检查 CORS 配置
-
-### Q: 配置未生效?
-A: 重新构建镜像,确保环境变量正确设置
-
-更多详细信息请参考 [DOCKER_DEPLOYMENT.md](./DOCKER_DEPLOYMENT.md)

+ 2 - 0
package.json

@@ -4,10 +4,12 @@
   "description": "SSO认证中心前端应用",
   "type": "module",
   "scripts": {
+    "dev-local": "vite --mode dev-local",
     "dev": "vite --mode dev",
     "dev:test": "vite --mode test",
     "dev:prod": "vite --mode prod",
     "build": "vue-tsc && vite build",
+    "build:dev-local": "vite build --mode dev-local",
     "build:dev": "vite build --mode dev",
     "build:test": "vue-tsc && vite build --mode test",
     "build:prod": "vue-tsc && vite build --mode prod",

+ 3 - 2
vite.config.ts

@@ -8,6 +8,7 @@ export default defineConfig(({ command, mode }) => {
   const env = loadEnv(mode, process.cwd(), '')
   
   // 根据模式设置不同的配置
+  const isDevLocal = mode === 'dev-local'
   const isDev = mode === 'dev'
   const isTest = mode === 'test'
   const isProd = mode === 'prod'
@@ -20,7 +21,7 @@ export default defineConfig(({ command, mode }) => {
       },
     },
     server: {
-      port: isDev ? 3000 : isTest ? 3001 : 3002,
+      port: isDevLocal || isDev ? 3000 : isTest ? 3001 : 3002,
       host: true,
       open: true, // 自动打开浏览器
       proxy: {
@@ -36,7 +37,7 @@ export default defineConfig(({ command, mode }) => {
     },
     build: {
       outDir: `dist-${mode}`, // 不同环境输出到不同目录
-      sourcemap: isDev || isTest, // 开发和测试环境生成 sourcemap
+      sourcemap: isDevLocal || isDev || isTest, // 开发和测试环境生成 sourcemap
       minify: isProd ? 'terser' : false, // 生产环境压缩
       rollupOptions: {
         output: {