umi如何配置多环境

[sky185959]

环境有开发环境、测试环境、生成环境等 ，比如我用.umirc.local.js 表示开发环境， .umirc.test.js表示测试环境 .umirc.prod.js表示生成环境，我如何配置环境变量，配置不同的环境接口域名也不同，官网文档感觉描述的也不清楚，请大家赐教

[okoala]

https://umijs.org/zh/config/#define
可以使用 define

[sky185959]

https://umijs.org/zh/config/#define
可以使用 define

我现在也使用 define配置环境变量了，现在如果编译根据不同的配置编译配置文件

[weishijun14]

package.json:

"start": "cross-env UMI_ENV=cloud APP_TYPE=site umi dev",
“build": "cross-env UMI_ENV=prod umi build",

config/config.cloud.js + config/config.prod.js + config/config.js .

done!

[tang2016]

定义的环境变量如何在其他文件中获取呢

[weishijun14]

@tang2016
config.prod.js:

define: {
  'process.env.a' = 1
}

xxx.js:

console.log(process.env.a)   // 1

[NicholasNC]

1、安装 cross-env 插件

2、在 .umirc.js 文件中添加 define

// ref: https://umijs.org/config/
export default {

  define: {
    // 添加这个自定义的环境变量
    "process.env.LW_ENV": process.env.LW_ENV, // * 本地开发环境：dev，测试服：test，正式服：pro
  },

}

3、然后在 package.json文件的 scripts 中添加 "start": "cross-env LW_ENV=awegew umi dev",

[tonyjt]

修改了define里面的内容，npm run start 开发的时候，相关文件还是用的老的配置...

必须用到配置的文件有更新才能起效果，有点难

[sage-z]

环境变量有缓存啊，不是从命令上获取的最新的，配置文件有变动才会更新，有点难受

[grunmin]

在同个工程目录里面同时启动多个环境, 在构建的时候会互相影响, 请问是否有解决方案.
不是端口号冲突之类, 而是在代码里面根据UMI_ENV不同require不同的依赖, 在多个环境同时开启的时候共用一个编译缓存路径导致先启动的环境异常.

[lpy681]

package.json里面加上 UMI_ENV=xxx 这个xxx对应config.xxx.js

"start": "cross-env UMI_ENV=dev APP_TYPE=site umi dev",
"qa": "cross-env UMI_ENV=qa APP_TYPE=site umi dev",

如图

然后config.xxx.js里面写↓

export default {
  define: {
    // 添加这个自定义的环境变量
    "process.env.UMI_ENV": process.env.UMI_ENV, // * 本地开发环境：dev，qa环境：qa，生产环境prod
 "process.env.name": '自定义name',
  },
}

页面中使用的时候

console.log(process.env.UMI_ENV) // run start的时候显示dev。run qa的时候显示qa
console.log(process.env.name) // 自定义name

[EdifierCN]

在同个工程目录里面同时启动多个环境, 在构建的时候会互相影响, 请问是否有解决方案.
不是端口号冲突之类, 而是在代码里面根据UMI_ENV不同require不同的依赖, 在多个环境同时开启的时候共用一个编译缓存路径导致先启动的环境异常.

我也是一个项目通过命令打不同的包，有解决方式吗？

[wulinjie122]

我一个需求，我的静态文件都是放在阿里云OSS上的，我想把OSS的地址放在环境变量里，根据不同环境加载不同的OSS地址。

<img id="site_logo" src={process.env.ossAddress + '/images/logo.jpg'} alt="Image" style={{ width: 180 }} />

[wulinjie122]

可以了，感谢各位，下面是我的配置，直接在.umirc.local.ts文件里，添加一段这样的配置：

// .umirc.local.ts
define: {
    OSS_END_POINT: 'https://www.xxx.oss-cn-shanghai.aliyuncs.com'
  }

需要注意的是，可能需要重启，yarn start，在typescript文件里直接使用变量即可生效：

<img id="site_logo" src={OSS_END_POINT + '/images/logo01.png'} alt="Image" style={{ width: 180 }} />