前言
通常情况下,一个项目区分开发环境,测试环境,生产环境,那么umi如何添加环境变量来区分当前环境呢?
安装cross-env
因为要修改package.json的script命令,为了兼容OS X和Windows系统,所以需要借助cross-env
npm i cross-env -S
修改package.json
npm 命令:
- cross-env 兼容OS X和Windows系统
- UMI_ENV=dev 指定环境变量值
- umi dev 运行本地开发服务
- umi build 打包
"scripts": { "start": "cross-env UMI_ENV=dev umi dev", "uat": "cross-env UMI_ENV=uat umi build", "sit": "cross-env UMI_ENV=sit umi build", "build": "cross-env UMI_ENV=prod umi build", },
创建对应的umirc.ts
先看看官网介绍
意思是会根据UMI_ENV的值来选择哪一个.umirc.xxx.ts的配置,并且会和.umirc.ts做深比较,对配置进行合并
因此根据我们修改的package.json,我们需要创建对应的.umirc.xxx.ts
- .umirc.dev.ts
export default { define: { 'process.env.UMI_ENV': 'dev', } }
- .umirc.uat.ts
export default { define: { 'process.env.UMI_ENV': 'uat', } }
- .umirc.sit.ts
export default { define: { 'process.env.UMI_ENV': 'sit', } }
- .umirc.prod.ts
export default { define: { 'process.env.UMI_ENV': 'prod', } }
项目中,直接使用process.env.UMI_ENV变量,即可获取当前处于哪个环境
console.log(process.env.UMI_ENV);