本文使用的项目是通过hbuilderX创建的，仅讨论hbuilderX创建项目的自定义环境变量设置，使用cli创建的项目怎么样自定义环境变量，官方文档上有说明。
本文CSDN图文链接uni-app根据运行环境自定义环境变量
需求背景
随着用户使用平台的增多，WEB、H5、微信小程序、钉钉小程序、各种小程序，都需要前端来维护，uniapp一套代码多端应用解决了这个问题，但是又有一个新的问题，
大部分系统部署到生产环境之前，或多或少的要经过：本地开发、测试环境测试、预生产环境测试这几个环节。而且每一步对应的系统参数有可能是不一样的。
官方也给出了一些思路：
运行环境管理
H5或者WEB怎么区分是在测试环境还是在生产环境？
大家都会想到：可以通过process.env.NODE_ENV==='development'区分，
但是怎么区分打包部署在测试环境还是生产环境呢？
自定义环境变量呗，
还好，uniapp可以设置环境变量，我在vue.config.js里面配置个环境变量参数不就解决了。但是HBuilderX创建的项目只能在vue.config.js里添加环境变量，配置.env文件不可以。（使用cli创建的uniapp项目我还没有试过可不可以）
H5是的环境变量应该是解决了。。。但是，每次打包之前都确认和修改一下环境变量参数，是个很烦人的操作。
而且大部分开发者用uni-app，意图绝对不是在写h5页面或者web页面（如果是vue、react不香吗？）。微信小程序差不多和H5使用同样的方法解决，（其他小程序我没有试）。
然而uniapp运行app,发行app的process.env.NODE_ENV 是'product'，根本没有development一说，那APP怎么区分这是在本地开发还是生产上线了呢？
解决思路
扩展平台
uniapp技术文档--扩展新的平台
那是不是也可以专门针对测试环境和生产环境扩展一个平台，然后在扩展参数里写一下我的自定义环境变量。
于是乎，我就照着官方例子，扩展了一个WEB平台，参数如下
"h5-web": {
"title": "WEB本地开发和测试环境打包",
"env": {
"UNI_PLATFORM": "h5",
"browser": "chrome",
"VUE_APP_TITLE": "Hbuilder环境参数配置示例-WEB" // 其他自定义环境变量
},
"define": {
"H5-WEB": true
}
},运行和打包都可以使用这个扩展平台了，环境变量的问题也解决了？
但是其他自定义环境变量不生效，被知道为什么，process.env里就是没有（要是有在扩展平台自定义环境变量成功的朋友，能不能告诉我哪里写错了。）
那怎么办？我灵机一动想到了条件编译，于是就有了下面的代码
const is_development = process.env.NODE_ENV === 'development'
export const config = {
CURRENT_MODE: 'dev',
BASE_URL: '/dev',
ALERT_MSG: '这是H5测试页面，所有数据和业务仅为测试使用，不会产生实际业务影响',
MODE_CN: '测试环境H5',
CONFIG_PLATFORM: 'DEV_H5',
// #ifdef H5-WEB
ALERT_MSG: '这是WEB测试页面，所有数据和业务仅为测试使用，不会产生实际业务影响',
MODE_CN: '测试环境WEB',
CONFIG_PLATFORM: 'DEV_WEB'
// #endif
}判断AppId
APP自定义环境变量得另想方法了，翻阅了以下参考文档：
基础配置
DCloud appid 用途/作用/使用说明
APP专题 HTML5PULS
HTML5+ API Reference--runtime
想到了一个方法，测试环境和生产环境的appid不能一样，而且appid是可以使用代码获取到的，那是不是可以判断appid，确定是在哪个环境，然后使用不同的环境变量。有了下面的代码
const PRO_APPID = "开发环境appid", // 开发环境appid
DEV_APPID = "生产环境appid", // 生产环境appid
HB_APPID = "HBuilder"; // HBuilder调试基座
// puls是app才有的变量
const APP_ID = plus.runtime.appid;
// 测试环境的配置
let config = {
BASE_URL: 'http://dev/url',
CURRENT_MODE: 'dev',
MODE_CN: '测试环境APP'
}
// HBuilder调试基座
if (APP_ID === HB_APPID) {
config.ALERT_MSG = "您正在使用HBuilder调试基座，请切换至本系统开发环境调试基座，如有技术问题，请咨询工号124546";
config.CONFIG_PLATFORM= 'HBuilder_APP'
}
// 开发环境
if (APP_ID === DEV_APPID) {
config.ALERT_MSG = "您正在使用本系统开发环境调试基座，所有数据和业务仅为测试使用，不会产生实际业务影响，如要办理实际业务，请在应用市场下载本app。"
config.CONFIG_PLATFORM = 'DEV_APP'
}
if (APP_ID === PRO_APPID) {
// 生产环境的配置
config = {
BASE_URL: 'https://product/url',
CURRENT_MODE: 'product',
CONFIG_PLATFORM: 'APP',
MODE_CN: '生产环境APP'
}
}
export const envConfig = {
APP_ID,
...config
}注：自定义调试基座的appid为制作自定义调试基座的时候mainfest.json中配置的appid。
在结合
static 目录的条件编译
进行代码优化。
然后又扩展了个平台
"uni-app": {
"scripts": {
"h5-web": {
"title": "WEB本地开发和测试环境打包",
"env": {
"UNI_PLATFORM": "h5",
"browser": "chrome",
"VUE_APP_OUTPUT_DIR": "Hbuilder环境参数配置示例-WEB"
},
"define": {
"H5-WEB": true
}
},
"h5-webpro": {
"title": "WEB生产环境打包",
"env": {
"UNI_PLATFORM": "h5",
"browser": "chrome",
"VUE_APP_OUTPUT_DIR": "Hbuilder环境参数配置示例-WEB"
},
"define": {
"H5-WEBPRO": true
}
},
"h5-pro": {
"title": "h5生产环境打包",
"env": {
"UNI_PLATFORM": "h5",
"browser": "chrome",
"VUE_APP_OUTPUT_DIR": "Hbuilder环境参数配置示例-WEB"
},
"define": {
"H5-PRO": true
}
},
"mp-weixin-pro": {
"title": "微信小程序生产环境打包",
"env": {
"UNI_PLATFORM": "mp-weixin",
"VUE_APP_OUTPUT_DIR": "Hbuilder环境参数配置示例-WEB"
},
"define": {
"MP-WEIXIN-PRO": true
}
}
}
}整理以后的项目地址uniapp环境配置，有需要的可以自行下载测试。
成果检验
扩展平台
H5
本地调试H5测试环境
操作：运行到浏览器
本地调试生产环境H5
操作：运行>>h5生产环境打包
测试环境H5发行部署
操作：发行>>网站-PC WEB或手机H5（仅适用于uni-app）
生产环境H5发行部署
操作：发行>>自定义发行>>h5生产环境打包
web
本地调试测试环境web
操作：运行>>WEB本地开发和测试环境打包
本地调试生产环境web
操作：运行>>WEB生产环境打包
测试环境web发行部署
操作：发行>>自定义发行>>WEB本地开发和测试环境打包
生产环境web发行部署
操作：发行>>自定义发行>>WEB生产环境打包
微信小程序
本地调试测试环境微信小程序
操作：运行到小程序模拟器>>微信开发者工具
本地调试生产环境微信小程序
操作：运行>>微信小程序生产环境打包
测试环境微信小程序发行部署
操作：发行>>小程序微信（仅适用于uni-app）
生产环境微信小程序发行部署
操作：发行>>自定义发行>>微信小程序生产环境打包
判断APPID
APP
使用默认调试基座
操作：运行>运行到手机或模拟器>模拟器（基座选择默认调试基座）
使用自定义调试基座或者使用测试appid打包
自定义调试基座操作：运行>运行到手机或模拟器>模拟器（基座选择自定义调试基座）
测试app：打包流程和app打包流程一致，注意修改mainfest.json文件中的appid。
注：本文测试省事，测试环境和自定义调试基座使用了同一个appid。但是建议自定义调试基座，测试环境，生产环境不要使用同一个appid。
生产环境app打包安装
操作：打包流程和app打包流程一致，注意修改mainfest.json文件中的appid。
项目使用须知
1、请升级Hbuilder到最新版本，要不然可能有些条件编译的样式不生效。
2、请修改\static\app-plus\config.js不同环境的appid为自己项目的
3、运行之前cnpm install 安装一下依赖呦
4、使用cli创建的项目我还没有测试，后面会专门更新一遍cli创建的项目怎么配置环境变量，敬请期待！
