uniapp 打包h5，自定义环境变量

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

uniapp借助HBuilderX可视化工具，可以进行开发、打包、上线等操作

发行视图

该图片分别有APP、小程序、H5的打包选项，正常操作就好(官网都有具体教程~)

环境判断

根据研发、生产 不同环境，一些判断、展示 都会有不同，例如：api域名链接等等，那么如何进行判断呢？

这里我们可以根据process.env.NODE_ENV的值进行判断，值为development是研发，值为production是生产。

H5 指定环境变量

但是打包成H5是process.env.NODE_ENV 的值都为 development，这里就需要用到自定义发行

package.json

根目录新建package.json文件，增加uni-app扩展节点，可实现自定义条件编译平台

{
	"uni-app": {
		"scripts": {
			"build:test": {
				"title": "build:test",
				"env": {
					"UNI_PLATFORM": "h5",
					"H_NODE_ENV": "development"
				}
			},
			"build:pro": {
				"title": "build:pro",
				"env": {
					"UNI_PLATFORM": "h5",
					"H_NODE_ENV": "production"
				}
			}
		}
	}
}

• 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+ 版本

效果

大家可以看到，自定义发行里，多了两个打包项，build:test与build:pro。

使用

在h5的环境下，H_NODE_ENV为研发环境变量时，引用测试eruda调试工具

// #ifdef H5
if(process.env.H_NODE_ENV==='development'){
  document.write('<scr' + 'ipt src="/jfmall-web/static/eruda.min.js"></scr' + 'ipt>');
　document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
}
// #endif