umi如何配置环境变量

前言

通常情况下，一个项目区分开发环境，测试环境，生产环境，那么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);