一般来说项目不止有dev和prod两个环境,umi可以通过环境变量 UMI_ENV 区分不同环境来指定配置。
需求:三套环境->本地环境localtest、测试发布环境testbuild、正式环境probuild
1.在根目录新建.umirc.localtest.ts、.umirc.testbuild.ts、.umirc.probuild.ts三个配置文件。
每个文件中按照以下方式定义变量,一般可包括测试账户的账号密码、请求前缀等。
export default {
define: {
loginName:'zhangsan', //登录名
loginPassword:'****', //登录密码
prefix:'', //请求前缀
},
};
- 安装cross-env,这个包是可以在跨平台设置环境变量。
package.json文件:
"scripts": {
"start:localtest": "cross-env UMI_ENV=localtest umi dev", //设置UMI_ENV为localtest
"start:testbuild": "cross-env UMI_ENV=testbuild umi dev",
"start:probuild": "cross-env UMI_ENV=probuild umi dev",
"build:testbuild": "cross-env UMI_ENV=testbuild umi build",
"build:probuild": "cross-env UMI_ENV=probuild umi build",
},
运行npm run start:localtest 即可运行localtest环境 同理其他环境
3.在页面中直接使用变量
console.log(loginName,loginPassword,prefix)
例:
if(!loginName||!loginPassword){
message.error('登录名或密码为空')
return
}
let param={
loginName,
loginPassword
}
dispatch({
type: 'loginModal/login',
payload: {
param
},
})
注:如果项目的配置比较复杂,可以将配置写在 config/config.ts 中。