fe-config-loader 1.1.0
前端应用每次只在打包编译时加载一组环境变量,这给前端应用尤其是容器化部署造成了很大的不方便。本插件为前端应用提供了一种在运行时动态加载配置文件的方法,通过挂载config.json文件到容器内部并动态加载它,实现同一镜像部署到不同环境的需求。
目前已支持VUE应用和REACT应用。
版本更新记录
1.0.5
简化获取配置方式,通过NODE_ENV自动判断获取配置内容的根节点
1.1.0
增加生产环境配置加密传输方式。注意: 加密配置传输,需要后台反向代理加密脚本,可以参考nginx配置方式实现方案
2.0.0
移除encrypt关键字
1. 引用依赖
npm install fe-config-loader
2. 环境变量配置
# .env.development文件
# 应用运行模式
NODE_ENV ='development'
############################### VUE ###################################
# 为VUE应用配置环境变量根键
# 非生产模式下有效,读取该根键下的配置变量
# 生产模式下,也就是'NODE_ENV = production'时该环境变量无效,读取根配置变量
# VUE_APP_CONFIG_ROOTKEY为空时,读取根配置变量
VUE_APP_CONFIG_ROOTKEY = "dev"
# 生产模式下,也就是'NODE_ENV = production'且反向代理将配置加密处理时
# 以下环境变量有效,配合设置反向代理加密配置,从1.1.0版本开始支持此功能
# 配置加密盐
VUE_APP_CONFIG_SALT = "tnP8DvkSp6MXtZHuP3ClhRTstakloIg"
# 配置加密迭代次数
VUE_APP_CONFIG_ITER = 16
# 配置加密偏移量
VUE_APP_CONFIG_IV = "PYYNphyM1GS1TXiJFKAtATSevEykrbL6eYh4J4FWEZUYSmdqP7e0Mn5xtXbrBgv8Ip"
#######################################################################
############################## REACT ##################################
# 为REACT应用配置环境变量根键
# 非生产模式下有效,读取该根键下的配置变量
# 生产模式下,也就是'NODE_ENV = production'时该环境变量无效,读取根配置变量
# REACT_APP_CONFIG_ROOTKEY为空时,读取根配置变量
REACT_APP_CONFIG_ROOTKEY = "dev"
# 生产模式下,也就是'NODE_ENV = production'且反向代理将配置加密处理时
# 以下环境变量有效,配合设置反向代理加密配置,从1.1.0版本开始支持此功能
# 配置加密盐
REACT_APP_CONFIG_SALT = "tnP8DvkSp6MXtZHuP3ClhRTstakloIg"
# 配置加密迭代次数
REACT_APP_CONFIG_ITER = 16
# 配置加密偏移量
REACT_APP_CONFIG_IV = "PYYNphyM1GS1TXiJFKAtATSevEykrbL6eYh4J4FWEZUYSmdqP7e0Mn5xtXbrBgv8Ip"
#######################################################################
...
3. 添加本地配置文件
1) 动态配置文件目录必须为:public/config.json
2) 支持单行注释// 和 多行注释/* ... */
/* public/config.json */
{
// 非生产模式下,XXX_APP_CONFIG_ROOTKEY = 'dev'时,读取以下配置信息
"dev": {
"baseUrl": "http://dev_hostname/api/v1",
"logLevel": "debug"
},
// 非生产模式下,XXX_APP_CONFIG_ROOTKEY = 'sit'时,读取以下配置信息
"sit": {
"baseUrl": "http://sit_hostname/api/v1",
"logLevel": "info"
},
// 生产模式或XXX_APP_CONFIG_ROOTKEY变量为空时,读取以下配置信息
"baseUrl": "http://prod_hostname/api/v1",
"logLevel": "error"
}
4. 引用配置
import axios from 'axios'
import configLoader from 'fe-config-loader'
const service = axios.create({
baseURL: configLoader.get('baseUrl'),
timeout: 20000,
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
})