UMI+DVA根据开发环境和生产环境不同动态加载变量

本文主要是介绍UMI+DVA根据开发环境和生产环境不同动态加载变量，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

你有没有遇到过这样的情况！比如你们有四种（或更多）环境：开发环境（本地调式代码环境）、测试环境（脏数据环境）、预生产环境（无限接近生产环境）、生产环境（正式环境或线上环境）等等环境。而对于不同环境你的静态资源host地址或者你的用户id等等可能是不一样的

只区分开发环境和生产环境

使用默认的环境变量 process.env.NODE_ENV
运行npm run start

console.log(process.env); // > {NODE_ENV: "development"}// NODE_ENV === "development" 开发环境 ; NODE_ENV === "production" 生产环境if (process.env.NODE_ENV === "production") {// 生产环境需要的操作setTitle(t);}

多个环境

umi 允许在 .umirc.js 或 config/config.js （二选一，.umirc.js 优先）中进行配置，支持 ES6 语法。
企业开发中通常会区分多个不同的环境，比如开发环境，测试环境，正式环境。不同个环境中需要请求不同的接口。

UMI_ENV

指定覆盖默认配置的配置文件。比如 UMI_ENV=prod umi build，那么则会用 .umirc.prod.js 覆盖 .umirc.js。或者是 config/config.prod.js 覆盖 config/config.js。注意是覆盖而不是替换，.umirc.prod.js 中没有的配置者会使用 .umirc.js 中的配置。

另外，开发模式下 .umirc.local.js 或者 config/config.local.js 中的配置永远是优先级最高的。

编码实战

step1 下载 cross-env 插件

npm install --save-dev cross-env

step2 新建配置文件

根目录下新建此格式的.umirc.参数名.jsjs文件，示例如下

文件内容如下

// .umirc.prod.js 或者 config/config.prod.js
export default {define: {"process.env": {NODE_ENV: 'prod'}, // 修改process.env对象数据GLOBAL_VAR: "global_var", // 直接增加全局变量},
};

step3 修改package.json文件

修改后内容如下

 "scripts": {"start": "umi dev","build": "umi build","build:test": "cross-env UMI_ENV=test umi build","build:prod": "cross-env UMI_ENV=prod umi build","eslint": "eslint --ext .js --ext .jsx ./src","lint-staged": "lint-staged"},

step4 修改js文件，根据环境变量进行不同输出

console.log('GLOBAL_VAR', GLOBAL_VAR) // > global_var
console.log('process.env.NODE_ENV', process.env.NODE_ENV) // > prod// NODE_ENV === "development" 开发环境 ; NODE_ENV === "production" 生产环境
if (process.env.NODE_ENV === "prod") {// 生产环境需要的操作
}

step5 运行命令

命令结构如下npm run build:参数名

npm run build:prod

此处参数名未新建配置文件处的参数名

step6 观察控制台打印

'GLOBAL_VAR', 'global_var'
'process.env.NODE_ENV', 'prod'

参考资料

react-多环境配置
UmiJS 配置 define

这篇关于UMI+DVA根据开发环境和生产环境不同动态加载变量的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---