uni-app环境变量 & 动态配置manifest.json

目录

环境变量

配置

页面使用

动态配置manifest.json

创建env文件

创建 vue.config.js

 总结

环境变量

uni-app 通过在package.json文件中增加uni-app扩展节点，可实现自定义条件编译平台。

扩展新的平台后，有3点影响：

1. 可以在代码里编写自定义的条件编译，为这个新平台编写专用代码
2. 运行时可以执行面向新平台的编译运行
3. 发行时可以执行面向新平台的编译发行

配置

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

根新建package.json扩展配置用法：

{
	"uni-app": {
		"scripts": {
			"dev": {
				"title": "build:dev",
				"env": {
					"UNI_PLATFORM": "h5",
					"H_NODE_ENV": "dev",
					"H_BASEURL": "/heat",
					"H_REDIRECT": "xxx"
 
				}
			},
			"test": {
				"title": "build:test",
				"env": {
					"UNI_PLATFORM": "h5",
					"H_NODE_ENV": "test",
					"H_BASEURL": "/test-heat",
					"H_REDIRECT": "xxx"
				}
			},
			"prod": {
				"title": "build:prod",
				"env": {
					"UNI_PLATFORM": "h5",
					"H_NODE_ENV": "prod",
					"H_BASEURL": "/heat",
					"H_REDIRECT": "xxx"
				}
			}
		}
	}
}复制

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

页面使用

大家可以看到，多了配置的运行模式

页面使用

注意 直接输出值查看 输出env整个对象看不到这个值

const instance = new WxRequest({
	baseURL: process.env.H_BASEURL || '/heat',
	timeout: 60000,
});
		
console.log(process.env.H_BASEURL, 'process.env.H_BASEURL');复制

动态配置manifest.json

根目录下新建新建环境相关变量配置文件env.js

创建env文件

其中变量对象名称要和package.json文件中定义的key保持一致，方便后续通过对象方式直接取值。变量对象中添加的是需要根据不同环境配置的变量，比如后端服务请求地址，小程序appid和一些别的插件key。

// 不同的环境变量配置
const dev = {
	requestBaseUrl: 'http://xxx',
 
}
 
const test = {
	requestBaseUrl: 'https://xxx',
 
}
 
const prod = {
	requestBaseUrl: 'https://xxx',
 
}
 
 
const ENV_CONFIG = {
	dev,
	test,
	prod
}
 
module.exports = ENV_CONFIG复制

创建 vue.config.js

这里需要在 项目根路径下创建：vue.config.js 文件

重新读取写入 manifest,json

 fs.readFile 读取的json 文件中不能有注释，读取成功的返回值是buffer（二进制）数据，想获得原字符串内容需要用toString()转换一下

const fs = require('fs');
const ENV_CONFIG = require('./env.js')
const target = ENV_CONFIG[process.env.UNI_SCRIPT].requestBaseUrl || "http://xxxx";
console.log(process.env.UNI_SCRIPT, '当前环境');
console.log(target, "代理的地址");
 
try {
	fs.readFile(`${__dirname}/manifest.json`, function(err, data) {
		if (err) {
			console.error(err);
		} else {
			var _data = JSON.parse(data.toString());
			_data['h5'].devServer = {
 
				"https": false,
				"port": "8080",
				"disableHostCheck": true,
				"proxy": {
					"/": {
						"target": target,
						"changeOrigin": true,
						"secure": true
					}
				}
 
			};
			_data = JSON.stringify(_data, null, 2);
			// 写入
			fs.writeFile(`${__dirname}/manifest.json`, _data, {
				encoding: "utf-8"
			}, function(err) {
				if (err) {
					console.log('写入失败', err);
				} else {
					console.log('写入成功');
				}
			});
		}
	});
} catch (e) {
	console.log(111);
}复制

注意:此时通过process.env.H_NODE_ENV是获取不到package.json配置的H_NODE_ENV的，通过打印process.env可以看到

UNI_SCRIPT能获取到我们定义的环境名称,也就是package.json配置的自定义编译名称,这样就能根据以下形式获取不同的环境信息了

ENV_CONFIG[process.env.UNI_SCRIPT].requestBaseUrl复制

 总结

1.需要本地调试时，点击HBuilder X工具栏“运行”，选择自定义的对应的环境；

2.代码中通过process.env.H_BASEURL获取package.json配置的变量，或者全局注册或者局部引入env.js 通过 ENV_CONFIG[process.env.UNI_SCRIPT].requestBaseUrl获取

3.发布时, 点击HBuilder X工具栏“运行”，选择自定义的对应的环境,编译后打开微信开发者工具或者支付宝开发者工具,上传即可(运行的哪个环境,上传的就是哪个环境),也可以点击HBuilder X工具栏 "发行" ,选择自定义的对应的环境