我们关心的，不是你是否失败了，而是你对失败能否无怨。——林肯
今天遇到一个问题，umijs框架下的环境变量配置不好使
首先是我package.json里的配置是这样的：
1
2
3
4
5
| "scripts": {
"start": "cross-env NODE_ENV=dev umi dev",
"build:test": "cross-env NODE_ENV=test umi build",
"build:production": "cross-env NODE_ENV=prod umi build"
}
|
然后在我其中一个js文件中进行引用：
1
2
| console.log({ NODE_ENV: process.env.NODE_ENV });
console.log({ 'process.env': process.env });
|
然后当我指定为test时
1
2
3
| "scripts": {
"start": "cross-env NODE_ENV=test umi dev"
}
|
其打印出来的结果仍然是development，(大概是这个效果，这里是手动做的打印数据)
于是按照umijs官方文档去配置：配置
找到.umirc.ts
1
2
3
4
5
6
7
8
9
10
| import { defineConfig } from 'umi';
export default defineConfig({
define: {
'process.env': {
NODE_ENV: 'test',
},
}
})
|
配置完毕后，发生了一些奇怪的变化，我看到了这一幕
取值时仍然是development，但是随后我展开打印，却变成了test
这时候，我想到换一个变量名，于是我修改为UMI_ENV
1
2
3
4
5
6
7
8
9
10
| import { defineConfig } from 'umi';
export default defineConfig({
define: {
'process.env': {
UMI_ENV: 'test',
},
}
})
|
然后发现其成功生效
1
2
| console.log({ UMI_ENV: process.env.UMI_ENV });
console.log({ 'process.env': process.env });
|
打印结果
此时虽然成功修改到了全局变量，但我这个.umirc.ts没有按照我package.json中的环境变量进行多环境应用配置，于是我找到了umijs官方文档提到的多份环境配置
新建了.umirc.dev.ts
1
2
3
4
5
6
7
8
9
| import { defineConfig } from 'umi';
export default defineConfig({
define: {
'process.env': {
UMI_ENV: 'development',
},
},
});
|
新建了.umirc.test.ts
1
2
3
4
5
6
7
8
9
| import { defineConfig } from 'umi';
export default defineConfig({
define: {
'process.env': {
UMI_ENV: 'test',
},
},
});
|
以及.umirc.prod.ts
1
2
3
4
5
6
7
8
9
| import { defineConfig } from 'umi';
export default defineConfig({
define: {
'process.env': {
UMI_ENV: 'production',
},
},
});
|
然后修改package.json
1
2
3
4
5
| "scripts": {
"start": "cross-env UMI_ENV=dev umi dev",
"build:test": "cross-env UMI_ENV=test umi build",
"build:production": "cross-env UMI_ENV=prod umi build"
}
|
此时，只要我们
指定UMI_ENV为dev，则对应的process.env.UMI_ENV则是development
指定UMI_ENV为test，则对应的process.env.UMI_ENV则是test
指定UMI_ENV为prod，则对应的process.env.UMI_ENV则是production