移动端环境配置优化方案

📋 当前配置方式

文件: mobile/src/common/config.js
方式: 基于 process.env.NODE_ENV 环境判断

✅ 优势

配置集中管理
支持开发和生产环境自动切换
与uni-app兼容性好

⚠️ 改进空间

可以引入环境变量管理
支持多环境配置（开发、测试、生产）

🔧 环境变量优化方案

方案一：Vue CLI环境变量（推荐）

1. 创建环境配置文件

开发环境 .env.development:

# 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:

# 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:

// 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:

# 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

构建命令

# 开发环境
npm run dev:h5

# 测试环境构建
cross-env NODE_ENV=staging npm run build:h5

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

🔐 敏感信息管理

1. RSA密钥管理

问题: 密钥硬编码在代码中
解决方案: 通过环境变量或配置服务管理

// 加密配置优化
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. 条件编译支持

// 平台相关配置
export const PLATFORM_CONFIG = {
    // #ifdef H5
    apiTimeout: 30000,
    // #endif
    
    // #ifdef MP-WEIXIN
    apiTimeout: 60000, // 小程序网络较慢
    // #endif
    
    // #ifdef APP-PLUS
    apiTimeout: 45000,
    // #endif
};

2. 小程序域名配置

微信小程序 manifest.json:

{
    "mp-weixin": {
        "setting": {
            "urlCheck": true
        },
        "appid": "your-weixin-appid"
    }
}

🔧 配置验证工具

配置检查函数

// 配置验证器
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环境变量注入

# 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部署配置

# 多阶段构建
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. 备份现有配置

cp mobile/src/common/config.js mobile/src/common/config.js.backup

2. 创建环境文件

复制上述环境变量模板
根据实际环境修改配置值

3. 更新代码

修改config.js使用环境变量
添加配置验证逻辑

4. 测试验证

# 开发环境测试
npm run dev:h5

# 生产环境构建测试
npm run build:h5

📝 维护: 2025-01-03 创建
🎯 目标: 提供更灵活、安全的环境配置管理
📚 参考: Vue CLI环境变量文档、uni-app配置指南

mobile-environment-config.md 6.9 KB Trvalý odkaz Historie Surový