uni-app根据运行环境自定义环境变量

努力的小小D

已于 2022-10-16 17:07:52 修改

阅读量4.3k

点赞数 4

分类专栏： javascript uniapp 文章标签： javascript 小程序 html5 android

于 2022-04-03 22:02:22 首次发布

本文链接：https://blog.csdn.net/weixin_43938253/article/details/123926226

版权

javascript 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

uniapp

2 篇文章 0 订阅

订阅专栏

本文使用的项目是通过hbuilderX创建的，仅讨论hbuilderX创建项目的自定义环境变量设置，使用cli创建的项目怎么样自定义环境变量，官方文档上有说明。

uniapp是什么就不多说了，本文针对自定义环境变量的技术可行性以及开发过程进行开发和探讨，把总结出的经验贴出来供大家参考和讨论。
不足之处或者有更好的实践方法，可以在本文下留言，互通有无。
本文源码：uniapp环境配置

需求背景

随着用户使用平台的增多，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平台，参数如下

"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

uniapp技术文档–扩展新的平台
官方文档上是这样说的：

注意只能扩展web和小程序平台，不能扩展app打包。并且扩展小程序平台时只能基于指定的基准平台扩展子平台，不能扩展基准平台。

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：打包流程和app打包流程一致，注意修改mainfest.json文件中的appid。
在这里插入图片描述

项目使用须知

1、请升级Hbuilder到最新版本，要不然可能有些条件编译的样式不生效。比如：
在这里插入图片描述

2、请修改\static\app-plus\config.js不同环境的appid为自己项目的
在这里插入图片描述
3、运行之前cnpm install 安装一下依赖呦
4、使用cli创建的项目我还没有测试，后面会专门更新一遍cli创建的项目怎么配置环境变量，敬请期待！
前端小白一个，不足之处，欢迎指正！！