官网文档:环境变量 - Ant Design Pro
- Pro 脚手架默认使用 Umi 作为底层框架,在 Umi 内可通过指定
UMI_ENV
环境变量来区分不同环境的配置文件,UMI_ENV
需要在package.json
内配置。- 当
UMI_ENV
为test
时,则必须在 config 目录下配置config.test.ts
文件来管理test
环境下的不同变量,Umi 框架会在 deep merge 后形成最终配置。
一、在package.json文件中添加UMI_ENV变量,并赋值自定义环境名。
环境名:如dev、test、pre、prod等代表不同域名。
二、在项目根目录下的config目录下新建config.环境名.ts
扩展:如果config/config.ts文件中声明了跟config/config.环境名.ts一样的变量名,最后取值是读取:config.环境名.ts文件中的取值。-- 前提:运行项目的命令中,有指定UMI_ENV的环境名(即如上第一步)。
// config/config.dev.ts dev环境对应的配置文件
import { defineConfig } from 'umi';
/**
* 导出的多环境变量命名约定:一律大写且采用下划线分割单词
* 注意:在添加变量后,需要在src/typing.d.ts内添加该变量的声明,否则在使用变量时IDE会报错。
*/
export default defineConfig({
define: {
AGE: 18, // 年龄
'process.env': {
API_HOST_URL: "http://xxx_dev/xxx",
}
},
});
三、运行package.json中的命令,在.tsx页面或.ts文件中,直接使用环境变量即可。
如运行:npm run start:test, 将自动读取config.dev.ts中声明的环境变量。
// xxx.tsx
export default function addProject() {
console.log('dev环境', process.env.API_HOST_URL, AGE) // http://xxx_dev/xxx, 18
}
如果遇到ts报错(如:找不到名称“AGE”),在项目根目录下的src目录下的typings.d.ts文件中,添加相关环境变量的声明即可:
declare const AGE: number;