314 lines
6.9 KiB
Markdown
314 lines
6.9 KiB
Markdown
# 移动端环境配置优化方案
|
|
|
|
## 📋 当前配置方式
|
|
|
|
**文件**: `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配置指南 |