你有没有遇到过这样的情况！比如你们有四种（或更多）环境：开发环境（本地调式代码环境）、测试环境（脏数据环境）、预生产环境（无限接近生产环境）、生产环境（正式环境或线上环境）等等环境。而对于不同环境你的静态资源host地址或者你的用户id等等可能是不一样的
只区分开发环境和生产环境使用默认的环境变量 process.env.NODE_ENV
运行npm run start
umi 允许在 .umirc.js 或 config/config.js （二选一，.umirc.js 优先）中进行配置，支持 ES6 语法。
企业开发中通常会区分多个不同的环境，比如开发环境，测试环境，正式环境。不同个环境中需要请求不同的接口。
指定覆盖默认配置的配置文件。比如 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文件，示例如下
文件内容如下
修改后内容如下
"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_varconsole.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' 项目完整的package.json文件 { "name": "hz_dingding_fe", "version": "1.0.0", "description": "", "main": "index.js", "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" }, "repository": { "type": "git", "url": "git@gitlab.iwhalecloud.com:citybrain/hzjwczxt/hz_dingding_fe.git" }, "author": "", "license": "ISC", "devDependencies": { "@cbd/eslint": "^0.0.60", "babel-eslint": "^10.0.1", "eslint": "^5.12.1", "eslint-config-airbnb": "^17.1.0", "eslint-config-prettier": "^3.5.0", "eslint-plugin-import": "^2.14.0", "eslint-plugin-jsx-a11y": "^6.1.2", "eslint-plugin-react": "^7.12.4", "pre-commit": "^1.2.2", "cross-env": "^5.2.0", "lint-staged": "^8.1.0" }, "dependencies": { "@cbd/fetch-mobile": "^0.3.1", "@cbd/icon": "^0.0.101", "@cbd/theme": "^0.2.53", "@cbd/umirc-dva": "^0.2.54", "@cbd/utils": "^0.2.53", "antd-mobile": "^2.2.8", "classnames": "^2.2.6", "dingtalk-jsapi": "^2.7.6", "dva": "^2.4.1", "query-string": "5", "react": "^16.4.2", "react-dom": "^16.4.2", "react-helmet": "^5.2.0", "react-resizable": "^1.10.1", "react-router-dom": "^4.3.1", "umi": "^2.4.3", "umi-plugin-react": "^1.7.6" }, "prettier": { "trailingComma": "es5" }, "lint-staged": { "*.{js,jsx}": [ "eslint --fix", "git add" ] }, "pre-commit": [ "lint-staged" ]} 参考资料react-多环境配置
UmiJS 配置 define