umi 项目多环境打包配置

blueju 等级 624 0 0

参考:

  1. 环境变量
  2. 多环境多份配置
  3. https://v2.umijs.org/zh/config/#define


我的需求:

  • 在不同环境(dvl、sit)下打包,请求基础地址也需要随环境的变化而改变


遇到的困难:

  • umi v3 文档不完善
  • 未知bug

1. 创建不同环境的配置文件

此部分可参考:

  1. 多环境多份配置


需要 dvl、sit 两个环境,因此创建两个配置文件,如图:
umi 项目多环境打包配置

2. 配置需要的环境变量

此部分可参考:

  1. https://v2.umijs.org/zh/config/#define

.umirc.dvl.ts

import { defineConfig } from 'umi';

export default defineConfig({
  define: {
    // dvl 环境的请求基础地址
    'process.env.REQUEST_BASE_URL': 'http://xxx.xxx.xx.xx:8080'
  }
});

.umirc.sit.ts

import { defineConfig } from 'umi';

export default defineConfig({
  define: {
    // dvl 环境的请求基础地址
    'process.env.REQUEST_BASE_URL': 'http://xxx.xxx.xx.xx:8080'
  }
});

3. 配置启动命令

此部分可参考:

  1. https://v2.umijs.org/zh/config/#define


如果按照 umi v3 文档中 https://umijs.org/zh-CN/docs/env-variables 说的配置,可能会出现以下错误,大致报错信息如下:

get user config failed, undefined does not exist


需要安装 cross-env,在 package.json 配置如下命令:

{
  ...
  "build:dvl": "cross-env UMI_ENV=dvl umi build",
  "build:sit": "cross-env UMI_ENV=sit umi build",
  ...
}

收藏
评论区

相关推荐

《前端实战总结》之使用解释器模式实现获取元素Xpath路径的算法
前端领域里基于javascript的设计模式和算法有很多,在很多复杂应用中也扮演着很重要的角色,接下来就介绍一下javascript设计模式中的解释器模式,并用它来实现一个获取元素Xpath路径的算法。 上期回顾 《前端实战总结》之迭代器模式的N1种应用场景(https://juejin.im/post/6844904008616771591)
vue.config.js配置前端代理
// vue.config.js 配置说明 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/cssloaderoptions // 这里只列一部分,具体配置参考文档 module.exports { // 部署生产环境和开发环境下的URL。 // 默认情况下,Vue CLI
一文搞懂什么是HTTP与HTTPS
(https://blog.csdn.net/petterp/article/details/102779257)Http与Https的区别。 在最近的开发中,深感网络相关基础知识薄弱,于是趁周末好好总结一
巨大提升!更快的 async 函数和 promises
(https://imghelloworld.osscnbeijing.aliyuncs.com/669a1c8f7203559afa4621628303674c.png) 翻译自:Faster async functions and promises(https://v8.dev/blog/fastasync) JavaScript
JavaScript中本地存储的方式有哪些?
(https://imghelloworld.osscnbeijing.aliyuncs.com/1f907f0895e2be23aa56604dd42e3626.png) 一、方式 javaScript本地缓存的方法我们主要讲述以下四种: cookie sessionStorage loc
基于Vue3+TypeScript+ Vue-Cli4.0构建手机端模板脚手架
vue3h5template基于 Vue3TypeScript VueCli4.0 vant ui sass rem 适配方案axios 封装 jssdk 配置 vconsole 移动端调试,构建手机端模板脚手架项目地址: 建议手机端查看 Node 版本要求Vue CLI 需要 Node.js 8.9 或更高版本
Ubuntu系统 使用与开发 常见异常与解决办法
1.误删除Ubuntu家目录下系统自带文件夹如Desktop、Downloads等在开发过程中,不小心在终端中把当前用户的Desktop、Downloads、Music等文件夹删除。解决措施:通过修改 ~/.config/userdirs.dirs 中的XDG_DESKTOP_DIR来重新指定系统文件夹:bash This fi
搭建 umi + qiankun + antd 的微前端平台
<a name"f5444d4a"</a 关键词: umi qiankun ant design pro 非动态注册子应用 非动态装载子应用(路由)<a name"Lxdp4"</a 背景银行项目,需要一个前端中台,承载各项目组开发的应用,本篇文章是在工作实践后所写,还是具有一定可借鉴性的,至于官网已经有相关内容还专门写这么一篇,还
umi 项目多环境打包配置
参考:1. 1. 1. <br /我的需求: 在不同环境(dvl、sit)下打包,请求基础地址也需要随环境的变化而改变<br /遇到的困难: umi v3 文档不完善 未知bug<a name"K770H"</a 1. 创建不同环境的配置文件此部分可参考:2. <br /需要 dvl、sit 两个环境,因此创建两个配置文件,如图:<br
umi +qiankun 主应用动态装载子应用(路由)解决方案
<a name"p1boA"</a 前言接上一篇(),上一篇中使用的都是运行时动态注册子应用,子应用路由仍然是写死的、非动态获取。<br /<br /然后真实项目中除了需要动态注册子应用,还很有可能需要动态装载子应用(路由),比如说:不同权限的用户需要给予他们不同的路由。<br /<br /此篇 blog 的代码是基于上一篇进行改动的,上一篇
使用 umi 3 创建子应用并接入主应用
使用 umi 3 创建子应用并接入主应用前言:<br /umi 3 更新频繁,文档不完善,时效性不定,因此前提条件很重要,今天是2020年8月21日。<br /<br /创建子应用使用的脚手架是:umi 3<br /创建主应用使用的脚手架是:um 2,但是本篇文章暂时不介绍创建主应用的过程及在主应用中的配置过程。<br /<a name"Yd
Lumen 中配置邮件发送并使用不同发件人发信实例
Intro阿里网易企业邮发件可参考另一篇: 基本配置Composer 安装 illuminate/mail 组件后将下方内容保存为 mail.php 放置于 Project/config 目录php<?phpreturn / |
https://cloud.tencent.com/developer/article/write/1830331
一、目标今天的目标是这个sign和appcode 二、步骤 Jadx没法上了app加了某梆的企业版,Jadx表示无能为力了。 FRIDADEXDumpDexDump出来,木有找到有效的信息。 Wallbreaker葫芦娃的Wallbreaker可以做些带壳分析,不过这个样本,用Frida的Spawn模式可以载入,Attach模式会失败。而直接用Objecti
京东面试真题解析,手撕面试官
第1章快速入门1.1 Kafka简介1.2 以Kafka为中心的解决方案1.3 Kafka核心概念1.4 Kafka源码环境 第2章生产者2.1 KafkaProducer 使用示例2.2 KafkaProducer 分析 ProducerInterceptors&cProducerInterceptor Kafka 集群元数据 Serializ
vue项目无配置文件解决方案
问题在开发vue项目时,需要重新设置项目的启动端口,发现项目目录中并没有相关的配置文件【config目录】vue脚手架版本【通过vue version查询】:@vue/cli 4.5.13解决方案在vue项目根目录下创建vue.config.js配置文件vue.config.jsmodule.exports devServer: d