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