umi如何配置环境变量

简介: umi如何配置环境变量


前言

通常情况下,一个项目区分开发环境,测试环境,生产环境,那么umi如何添加环境变量来区分当前环境呢?

安装cross-env

因为要修改package.json的script命令,为了兼容OS X和Windows系统,所以需要借助cross-env

npm i cross-env -S

修改package.json

npm 命令:

  • cross-env 兼容OS X和Windows系统
  • UMI_ENV=dev 指定环境变量值
  • umi dev 运行本地开发服务
  • umi build 打包
"scripts": {
    "start": "cross-env UMI_ENV=dev umi dev",
    "uat": "cross-env UMI_ENV=uat umi build",
    "sit": "cross-env UMI_ENV=sit umi build",
    "build": "cross-env UMI_ENV=prod umi build",
  },

创建对应的umirc.ts

先看看官网介绍

意思是会根据UMI_ENV的值来选择哪一个.umirc.xxx.ts的配置,并且会和.umirc.ts做深比较,对配置进行合并

因此根据我们修改的package.json,我们需要创建对应的.umirc.xxx.ts

  • .umirc.dev.ts
export default {
  define: {
    'process.env.UMI_ENV': 'dev',
  }
}
  • .umirc.uat.ts
export default {
  define: {
    'process.env.UMI_ENV': 'uat',
  }
}
  • .umirc.sit.ts
export default {
  define: {
    'process.env.UMI_ENV': 'sit',
  }
}
  • .umirc.prod.ts
export default {
  define: {
    'process.env.UMI_ENV': 'prod',
  }
}

项目中,直接使用process.env.UMI_ENV变量,即可获取当前处于哪个环境

console.log(process.env.UMI_ENV);
目录
相关文章
|
4天前
vue-cli配置环境变量
vue-cli配置环境变量
22 0
|
7月前
|
JavaScript 前端开发 Java
Vue路由与nodejs下载安装及环境变量的配置
Vue路由与nodejs下载安装及环境变量的配置
43 0
|
4天前
|
缓存 Java 开发工具
【开发工具】Gradle的安装 与 配置环境变量
【开发工具】Gradle的安装 与 配置环境变量
109 0
|
JavaScript
源码学习:Vite中加载环境变量(loadEnv)的实现
源码学习:Vite中加载环境变量(loadEnv)的实现
6446 0
UMI多环境配置
一般来说项目不止有dev和prod两个环境,umi可以通过环境变量 UMI_ENV 区分不同环境来指定配置。
1275 0
|
2天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
8 1
|
4天前
|
JavaScript 测试技术
vue不同环境打包环境变量处理
vue不同环境打包环境变量处理
36 0
|
4天前
【Hbuilder】Hbuilder 插件[App]云打包安装失败--已解决
【Hbuilder】Hbuilder 插件[App]云打包安装失败--已解决
27 0
|
4天前
|
JavaScript Unix Linux
nodejs设置环境变量
nodejs设置环境变量
|
4天前
|
JavaScript 前端开发 Linux
vite 中使用环境变量的相关总结
vite 中使用环境变量的相关总结
78 0