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);
目录
相关文章
|
6月前
vue-cli配置环境变量
vue-cli配置环境变量
46 0
|
JavaScript 前端开发 Java
Vue路由与nodejs下载安装及环境变量的配置
Vue路由与nodejs下载安装及环境变量的配置
86 0
|
6月前
|
缓存 Java 开发工具
【开发工具】Gradle的安装 与 配置环境变量
【开发工具】Gradle的安装 与 配置环境变量
215 0
|
JavaScript
源码学习:Vite中加载环境变量(loadEnv)的实现
源码学习:Vite中加载环境变量(loadEnv)的实现
7213 0
UMI多环境配置
一般来说项目不止有dev和prod两个环境,umi可以通过环境变量 UMI_ENV 区分不同环境来指定配置。
1389 0
|
30天前
|
API
Vite 中环境变量的配置方法
【10月更文挑战第10天】 Vite 中环境变量的配置方法
236 2
|
3月前
|
安全 JavaScript Shell
vite中环境变量的使用与配置,非常实用详细!
【8月更文挑战第2天】vite中如何使用环境变量?根据当前的代码环境产生值的变化的变量就叫做环境变量。本文将详细介绍vite中如何使用环境变量
603 1
|
3月前
|
存储 JavaScript 安全
Vue 3 环境变量配置
Vue 3 环境变量配置
|
3月前
|
前端开发
Taro——环境变量配置
最近准备开发移动端相关的内容,调研后选择了Taro,基于Taro+Vue3进行开发,在初始化框架后,又加入了一些前端规范限制,都完成后,打算配置环境变量,却发现按着官方的文档去配置,并没有生效;在封装的axios中去使用的使用,获取到的是undefined,所以这里做下记录;
48 0