一般来说项目不止有dev和prod两个环境,umi可以通过环境变量 UMI_ENV
区分不同环境来指定配置。
需求:三套环境->本地测试环境local、测试发布环境testbuild、正式环境probuild
1.在根目录新建.umirc.local.ts、.umirc.testbuild.ts、.umirc.probuild.ts三个配置文件。
其中.umirc.local.ts,仅在 umi dev
时有效。umi build
时不会被加载。
每个文件中按照以下方式定义变量,一般可包括测试账户的账号密码、请求前缀等。
export default {
define: {
loginName:'zhangsan', //登录名
loginPassword:'****', //登录密码
prefix:'', //请求前缀
},
};
2. 根据需要选一种即可。
方法一:根目录新建.env文件,指定UMI_ENV(本地dev时,指定UMI_ENV也是无效的,
.umirc.local.ts优先级最高)
UMI_ENV=testbuild
方法二:
安装cross-env,这个包是可以在跨平台设置环境变量。
package.json文件:
"scripts": {
"start": "umi dev",
"build": "umi build",
"build:testbuild": "cross-env UMI_ENV=testbuild umi build", //设置UMI_ENV为testbuild
"build:probuild": "cross-env UMI_ENV=probuild umi build", //设置UMI_ENV为probuild
},
3.在页面中直接使用变量
console.log(loginName,loginPassword,prefix)
注:如果项目的配置比较复杂,可以将配置写在 config/config.ts
中。
多环境官网讲得比较详细了