uniapp多环境配置

多环境配置的必要性

在UniApp开发中，多环境配置能有效区分开发、测试、生产等不同环境的API地址、密钥等参数，避免手动修改代码导致的错误。

创建环境配置文件

在项目根目录下创建env.js或config.js文件，定义不同环境的变量：

const env = {
  development: {
    BASE_URL: 'http://dev.example.com',
    API_KEY: 'dev_key_123'
  },
  production: {
    BASE_URL: 'https://api.example.com',
    API_KEY: 'prod_key_456'
  }
}

export default env

动态加载环境变量

通过process.env.NODE_ENV判断当前环境并加载对应配置：

import env from './env.js'

const currentEnv = process.env.NODE_ENV || 'development'
const config = env[currentEnv]

export default config

跨平台兼容处理

在manifest.json中配置条件编译，处理不同平台的差异：

"app-plus": {
  "env": {
    "API_BASE": "https://app.example.com"
  }
},
"h5": {
  "env": {
    "API_BASE": "https://h5.example.com"
  }
}

打包时指定环境

通过--mode参数指定打包环境：

# 开发环境
npm run dev --mode development

# 生产环境
npm run build --mode production

条件编译处理

在代码中使用条件编译处理环境差异：

// #ifdef H5
console.log('当前是H5环境')
// #endif

// #ifdef APP-PLUS
console.log('当前是APP环境')
// #endif

注意事项

• 敏感信息不应直接写在配置文件中，建议通过CI/CD工具注入
• 小程序平台的环境变量需通过uni.getSystemInfoSync()获取
• 测试阶段建议使用dotenv库管理环境变量