# 移动端环境配置优化方案 ## 📋 当前配置方式 **文件**: `mobile/src/common/config.js` **方式**: 基于 `process.env.NODE_ENV` 环境判断 ### ✅ 优势 - 配置集中管理 - 支持开发和生产环境自动切换 - 与uni-app兼容性好 ### ⚠️ 改进空间 - 可以引入环境变量管理 - 支持多环境配置(开发、测试、生产) --- ## 🔧 环境变量优化方案 ### 方案一:Vue CLI环境变量(推荐) #### 1. 创建环境配置文件 **开发环境** `.env.development`: ```env # API服务器配置(开发环境使用代理) VUE_APP_API_BASE_URL=/api VUE_APP_SERVER_URL=http://localhost:8080 # 前端域名配置 VUE_APP_FRONTEND_URL=http://localhost:8081 # 客户端配置 VUE_APP_CLIENT_ID=e5cd7e4891bf95d1d19206ce24a7b32e VUE_APP_TENANT_ID=000000 # 加密配置 VUE_APP_ENCRYPT_ENABLED=true # 应用配置 VUE_APP_TITLE=校园管理系统(开发) VUE_APP_VERSION=1.0.0-dev # 调试配置 VUE_APP_DEBUG=true VUE_APP_CONSOLE_LOG=true ``` **生产环境** `.env.production`: ```env # API服务器配置 VUE_APP_API_BASE_URL=https://hzdyjsapi.camasort.com VUE_APP_SERVER_URL=https://hzdyjsapi.camasort.com # 前端域名配置 VUE_APP_FRONTEND_URL=https://hzdyjs.camasort.com # 客户端配置 VUE_APP_CLIENT_ID=e5cd7e4891bf95d1d19206ce24a7b32e VUE_APP_TENANT_ID=000000 # 加密配置 VUE_APP_ENCRYPT_ENABLED=true # 应用配置 VUE_APP_TITLE=校园管理系统 VUE_APP_VERSION=1.0.0 # 调试配置 VUE_APP_DEBUG=false VUE_APP_CONSOLE_LOG=false ``` #### 2. 更新配置文件 **修改** `mobile/src/common/config.js`: ```javascript // API请求配置 - 基于环境变量 export const REQUEST_CONFIG = { // 服务器地址配置 serverUrl: process.env.VUE_APP_SERVER_URL || 'http://localhost:8080', // 基础URL配置 baseURL: process.env.VUE_APP_API_BASE_URL || '/api', // 请求超时时间 timeout: 300000, // 客户端ID clientId: process.env.VUE_APP_CLIENT_ID || 'e5cd7e4891bf95d1d19206ce24a7b32e', // 租户ID tenantId: process.env.VUE_APP_TENANT_ID || '000000', // 默认referer referer: `${process.env.VUE_APP_FRONTEND_URL || 'http://localhost:8081'}/login?redirect=/index`, // 是否启用加密 encryptEnabled: process.env.VUE_APP_ENCRYPT_ENABLED === 'true', // 调试模式 debug: process.env.VUE_APP_DEBUG === 'true', // 控制台日志 consoleLog: process.env.VUE_APP_CONSOLE_LOG === 'true', }; ``` --- ## 🌍 多环境支持 ### 测试环境配置 **文件** `.env.staging`: ```env # API服务器配置 VUE_APP_API_BASE_URL=https://test-api.hzdyjs.camasort.com VUE_APP_SERVER_URL=https://test-api.hzdyjs.camasort.com # 前端域名配置 VUE_APP_FRONTEND_URL=https://test.hzdyjs.camasort.com # 应用配置 VUE_APP_TITLE=校园管理系统(测试) VUE_APP_VERSION=1.0.0-staging # 调试配置 VUE_APP_DEBUG=true VUE_APP_CONSOLE_LOG=true ``` ### 构建命令 ```bash # 开发环境 npm run dev:h5 # 测试环境构建 cross-env NODE_ENV=staging npm run build:h5 # 生产环境构建 npm run build:h5 ``` --- ## 🔐 敏感信息管理 ### 1. RSA密钥管理 **问题**: 密钥硬编码在代码中 **解决方案**: 通过环境变量或配置服务管理 ```javascript // 加密配置优化 export const ENCRYPT_CONFIG = { // 从环境变量读取,提供默认值 RSA_PUBLIC_KEY: process.env.VUE_APP_RSA_PUBLIC_KEY || 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdHnzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ==', RSA_PRIVATE_KEY: process.env.VUE_APP_RSA_PRIVATE_KEY || 'MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAmc3CuPiGL/LcIIm7zryCEIbl1SPzBkr75E2VMtxegyZ1lYRD+7TZGAPkvIsBcaMs6Nsy0L78n2qh+lIZMpLH8wIDAQABAkEAk82Mhz0tlv6IVCyIcw/s3f0E+WLmtPFyR9/WtV3Y5aaejUkU60JpX4m5xNR2VaqOLTZAYjW8Wy0aXr3zYIhhQQIhAMfqR9oFdYw1J9SsNc+CrhugAvKTi0+BF6VoL6psWhvbAiEAxPPNTmrkmrXwdm/pQQu3UOQmc2vCZ5tiKpW10CgJi8kCIFGkL6utxw93Ncj4exE/gPLvKcT+1Emnoox+O9kRXss5AiAMtYLJDaLEzPrAWcZeeSgSIzbL+ecokmFKSDDcRske6QIgSMkHedwND1olF8vlKsJUGK3BcdtM8w4Xq7BpSBwsloE=', CLIENT_ID: process.env.VUE_APP_CLIENT_ID || 'e5cd7e4891bf95d1d19206ce24a7b32e', TENANT_ID: process.env.VUE_APP_TENANT_ID || '000000', ENCRYPT_HEADER: 'encrypt-key', ENCRYPT_ENABLED: process.env.VUE_APP_ENCRYPT_ENABLED === 'true', }; ``` ### 2. 环境变量安全 - 生产环境密钥通过CI/CD注入 - 本地开发使用示例密钥 - 敏感配置文件加入`.gitignore` --- ## 📱 uni-app特殊处理 ### 1. 条件编译支持 ```javascript // 平台相关配置 export const PLATFORM_CONFIG = { // #ifdef H5 apiTimeout: 30000, // #endif // #ifdef MP-WEIXIN apiTimeout: 60000, // 小程序网络较慢 // #endif // #ifdef APP-PLUS apiTimeout: 45000, // #endif }; ``` ### 2. 小程序域名配置 **微信小程序** `manifest.json`: ```json { "mp-weixin": { "setting": { "urlCheck": true }, "appid": "your-weixin-appid" } } ``` --- ## 🔧 配置验证工具 ### 配置检查函数 ```javascript // 配置验证器 export const validateConfig = () => { const errors = []; // 检查必要配置 if (!REQUEST_CONFIG.serverUrl) { errors.push('服务器地址未配置'); } if (!REQUEST_CONFIG.clientId) { errors.push('客户端ID未配置'); } // 检查URL格式 if (REQUEST_CONFIG.serverUrl && !REQUEST_CONFIG.serverUrl.startsWith('http')) { errors.push('服务器地址格式错误'); } return { valid: errors.length === 0, errors }; }; // 启动时验证 const configCheck = validateConfig(); if (!configCheck.valid) { console.error('配置错误:', configCheck.errors); } ``` --- ## 🚀 部署最佳实践 ### 1. CI/CD环境变量注入 ```yaml # GitHub Actions示例 - name: Build with environment env: VUE_APP_API_BASE_URL: ${{ secrets.PROD_API_URL }} VUE_APP_CLIENT_ID: ${{ secrets.CLIENT_ID }} run: npm run build:h5 ``` ### 2. Docker部署配置 ```dockerfile # 多阶段构建 FROM node:18 as builder WORKDIR /app COPY package*.json ./ RUN npm ci COPY . . ARG VUE_APP_API_BASE_URL ARG VUE_APP_CLIENT_ID RUN npm run build:h5 FROM nginx:alpine COPY --from=builder /app/dist/build/h5 /usr/share/nginx/html ``` --- ## 📝 配置迁移指南 ### 从当前配置迁移到环境变量 #### 1. 备份现有配置 ```bash cp mobile/src/common/config.js mobile/src/common/config.js.backup ``` #### 2. 创建环境文件 - 复制上述环境变量模板 - 根据实际环境修改配置值 #### 3. 更新代码 - 修改`config.js`使用环境变量 - 添加配置验证逻辑 #### 4. 测试验证 ```bash # 开发环境测试 npm run dev:h5 # 生产环境构建测试 npm run build:h5 ``` --- **📝 维护**: 2025-01-03 创建 **🎯 目标**: 提供更灵活、安全的环境配置管理 **📚 参考**: Vue CLI环境变量文档、uni-app配置指南