首先,安排上umi的官方文档:
https://v3.umijs.org/zh-CN/docs/config
接下来,实战演练,分别在根目录下创建 .umirc.ts
以及 .umirc.prod.ts
文件(js文件同理)
为了兼容mac的环境变量,我们需要使用cross-env
这个npm包进行环境变量设置
npm i cross-env -S
创建后的2个文件填充以下代码:
.umirc.ts (默认作为dev环境)
import { defineConfig } from 'umi';
// let target = 'http://11.2.33.222:8080';
let target = 'https://xxxx.xxxx.xxxx.cn';
export default defineConfig({
nodeModulesTransform: {
type: 'none',
},
routes: [
{ path: '/', component: '@/pages/index' },
{ path: '/AssetsTypeList', component: '@/pages/AssetsTypeList' },
],
define: { // 重点就是这个属性了,设置全局变量
// 在项目中,可以通过process.env.NODE_ENV 或者
// process.env.UMI_ENV 或者process.env.date得到对应环境的值
'process.env': {
NODE_ENV: 'dev',
UMI_ENV: 'dev',
date: '2022-08-01',
},
},
fastRefresh: {},
// mfsu: {},
alias: {
'@': '/src',
},
hash: true,
proxy: {
'/govern': {
target,
changeOrigin: true,
},
'/label': {
target,
changeOrigin: true,
},
},
});
.umirc.prod.ts
import { defineConfig } from 'umi';
export default defineConfig({
define: {
'process.env': {
NODE_ENV: 'prod',
UMI_ENV: 'prod',
date: '2022-08-22',
},
},
});
接着,我们需要改一下package.json的script中的启动和打包命令
package.json
{
"private": true,
"scripts": {
"start": "umi dev", // 由于我们默认本地是dev 因此不用配置,
// 如果想区分local和dev,则需要在根目录再创建一个.umirc.dev.ts文件
"build": "cross-env UMI_ENV=prod umi build", // 重点在这里!!!添加cross-env UMI_ENV=prod
"postinstall": "umi generate tmp",
"prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
"test": "umi-test",
"test:coverage": "umi-test --coverage"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,jsx,less,md,json}": [
"prettier --write"
],
"*.ts?(x)": [
"prettier --parser=typescript --write"
]
},
"dependencies": {
"@ant-design/pro-layout": "^6.5.0",
"@antv/g2plot": "^2.4.20",
"@antv/g6": "^4.6.15",
"antd": "^4.21.7",
"cross-env": "^7.0.3",
"echarts": "^5.3.3",
"moment": "^2.29.4",
"react": "17.x",
"react-dom": "17.x",
"umi": "^3.5.30"
},
"devDependencies": {
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@umijs/preset-react": "1.x",
"@umijs/test": "^3.5.30",
"lint-staged": "^10.0.7",
"prettier": "^2.2.0",
"typescript": "^4.1.2",
"yorkie": "^2.0.0"
}
}
然后在任意的组件中,打印使用全局变量
console.log('环境变量:', process.env, process.env.UMI_ENV);
dev
:然后我们在本地构建完成,打开F12查看是否打印出全局变量(dev环境,可以理解就是本地环境local)
prod
:生产环境则需要先打包部署,之后打开F12查看是否打印出全局变量