umijs环境变量问题

简介: umijs环境变量问题

我们关心的,不是你是否失败了,而是你对失败能否无怨。——林肯

今天遇到一个问题,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_ENVdev,则对应的process.env.UMI_ENV则是development

指定UMI_ENVtest,则对应的process.env.UMI_ENV则是test

指定UMI_ENVprod,则对应的process.env.UMI_ENV则是production

相关文章
|
Windows
path环境变量
path环境变量
77 1
|
6天前
|
Rust Shell Python
让你的 环境变量 更合理
让你的 环境变量 更合理
21 3
让你的  环境变量 更合理
|
6月前
|
前端开发 测试技术 API
NuxtJS3配置多环境变量
OK,配置完成~~~~~~
286 4
|
6月前
|
Shell
环境变量
环境变量。
58 1
|
存储 搜索推荐
环境变量详解
环境变量详解
104 1
|
Shell Linux Perl
10.2.3 环境变量的功能
10.2.3 环境变量的功能
99 0
|
数据可视化 编译器 C语言
环境变量使用与何时使用环境变量
环境变量使用与何时使用环境变量
100 0
|
Linux iOS开发 MacOS
一日一技:你真的知道如何设置环境变量?
一日一技:你真的知道如何设置环境变量?
155 0
|
Shell 开发工具 git
查看系统环境变量
查看系统环境变量
112 0