当前位置：首页 > uni-app

uniapp多环境配置

2026-02-05 16:45:18uni-app

多环境配置方法

在UniApp中实现多环境配置（如开发、测试、生产环境）可通过以下方式实现：

1. 使用process.env.NODE_ENV区分环境 UniApp基于Vue CLI，默认支持通过process.env.NODE_ENV获取当前环境变量：

// 获取当前环境
const env = process.env.NODE_ENV; // development/production

// 示例配置
const configs = {
  development: {
    baseUrl: 'http://dev.example.com'
  },
  production: {
    baseUrl: 'https://prod.example.com'
  }
}
export default configs[env]

2. 自定义环境变量 在项目根目录创建.env文件（开发环境）和.env.production文件（生产环境）：

uniapp多环境配置

# .env 开发环境
VUE_APP_API_BASE=http://dev.example.com
VUE_APP_ENV=development

# .env.production 生产环境
VUE_APP_API_BASE=https://prod.example.com
VUE_APP_ENV=production

通过process.env.VUE_APP_*访问变量：

console.log(process.env.VUE_APP_API_BASE)

3. 通过manifest.json配置 在src/manifest.json中配置不同环境的参数：

uniapp多环境配置

{
  "name": "app-name",
  "appid": "",
  "description": "",
  "versionName": "1.0.0",
  "versionCode": "100",
  "uni-app": {
    "scripts": {
      "dev": {
        "title": "开发环境"
      },
      "test": {
        "title": "测试环境"
      }
    }
  }
}

4. 条件编译实现环境区分 使用#ifdef条件编译语法：

// #ifdef H5
console.log('Web环境')
// #endif

// #ifdef MP-WEIXIN
console.log('微信小程序环境')
// #endif

5. 动态配置文件 创建config.js动态加载配置：

// config.js
const env = process.env.VUE_APP_ENV || 'development'

const configMap = {
  development: {
    baseUrl: 'http://dev.api.com'
  },
  production: {
    baseUrl: 'https://api.com'
  }
}

export default configMap[env]

打包命令配置

在package.json中配置不同环境的打包命令：

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development uni-cli-service serve",
    "build:prod": "cross-env NODE_ENV=production uni-cli-service build",
    "build:test": "cross-env NODE_ENV=test uni-cli-service build"
  }
}