uniapp 运行多环境判断

uniapp 运行多环境判断配置baseURL

不想看文档得就直接看最后示例

开发环境和生产环境

uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。

• 在HBuilderX 中，点击“运行”编译出来的代码是开发环境，点击“发行”编译出来的代码是生产环境
• cli模式下，是通行的编译环境处理方式。

if(process.env.NODE_ENV === 'development'){
    console.log('开发环境')
}else{
    console.log('生产环境')
}

自定义多个环境

如果你需要自定义更多环境，比如测试环境：

• 假设只需要对单一平台配置，可以 package.json 中配置，在HBuilderX的运行和发行菜单里会多一个出来。https://uniapp.dcloud.io/collocation/package
• 如果是针对所有平台配置，可以在vue-config.js中配置。https://uniapp.dcloud.io/collocation/vue-config

package.json扩展配置用法（拷贝代码记得去掉注释！）：

{
    /**
     package.json其它原有配置 
     */
    "uni-app": {// 扩展配置
        "scripts": {
            "custom-platform": { //自定义编译平台配置，可通过cli方式调用
                "title":"自定义扩展名称", // 在HBuilderX中会显示在 运行/发行 菜单中
                "BROWSER":"",  //运行到的目标浏览器，仅当UNI_PLATFORM为h5时有效
                "env": {//环境变量
                    "UNI_PLATFORM": "",  //基准平台
                    "MY_TEST": "", // ... 其他自定义环境变量
                 },
                "define": { //自定义条件编译
                    "CUSTOM-CONST": true //自定义条件编译常量，建议为大写
                }
            }
        }    
    }
}

Tips：

• UNI_PLATFORM仅支持填写uni-app默认支持的基准平台，目前仅限如下枚举值：h5、mp-weixin、mp-alipay、mp-baidu、mp-toutiao、mp-qq
• BROWSER 仅在UNI_PLATFORM为h5时有效,目前仅限如下枚举值：Chrome、Firefox、IE、Edge、Safari、HBuilderX
• package.json文件中不允许出现注释，否则扩展配置无效
• vue-cli需更新到最新版，HBuilderX需升级到 2.1.6+ 版本

示例

• package.json

  "uni-app": {
    "scripts": {
	  "dev": {
	    "title": "xxx-dev",
	    "env": {
	      "UNI_PLATFORM": "mp-weixin"
	    },
	    "define": {
	      "DEV": true
	    }
	  },
	  "test": {
	    "title": "xxx-test",
	    "env": {
	      "UNI_PLATFORM": "mp-weixin"
	    },
	    "define": {
	      "TEST": true
	    }
	  },
	  "pro": {
	    "title": "xxx-pro",
	    "env": {
	      "UNI_PLATFORM": "mp-weixin"
	    },
	    "define": {
	       "PRO": true 
	    }
	  }
    }
  },

• baseUrl.js

let baseUrl = ''
// #ifdef DEV
console.log('当前环境====>DEV')
baseUrl = 'xxxx' 你本地服务器地址
// #endif

// #ifdef TEST
console.log('当前环境====>TEST')
baseUrl =  'xxxx' 你测试服务器地址
// #endif

// #ifdef PRO
console.log('当前环境====>PRO')
baseUrl = 'xxxx' 你生产服务器地址
// #endif

export default baseUrl

配置 package.json之后，在发行按钮最底下就会出现三个按钮，不同按钮描述（ 你配置的"title": “xxx-test”,），代表不同环境，发行=》自定义发行也是一样

类似这个 钉钉小程序