UMI多环境配置

一般来说项目不止有dev和prod两个环境,umi可以通过环境变量 UMI_ENV 区分不同环境来指定配置。

需求:三套环境->本地测试环境local、测试发布环境testbuild、正式环境probuild

1.在根目录新建.umirc.local.ts、.umirc.testbuild.ts、.umirc.probuild.ts三个配置文件。

其中.umirc.local.ts,仅在 umi dev 时有效。umi build 时不会被加载。

每个文件中按照以下方式定义变量,一般可包括测试账户的账号密码、请求前缀等。

export default {
  define: {
    loginName:'zhangsan',        //登录名
    loginPassword:'****',        //登录密码
    prefix:'',                   //请求前缀
  },
};

2. 根据需要选一种即可。

方法一:根目录新建.env文件,指定UMI_ENV(本地dev时,指定UMI_ENV也是无效的,.umirc.local.ts优先级最高

UMI_ENV=testbuild

方法二:

安装cross-env,这个包是可以在跨平台设置环境变量。

package.json文件:

"scripts": {
    "start": "umi dev",
    "build": "umi build",
    "build:testbuild": "cross-env UMI_ENV=testbuild umi build",    //设置UMI_ENV为testbuild 
    "build:probuild": "cross-env UMI_ENV=probuild umi build",      //设置UMI_ENV为probuild 
},

3.在页面中直接使用变量

console.log(loginName,loginPassword,prefix)

注:如果项目的配置比较复杂,可以将配置写在 config/config.ts 中。

多环境官网讲得比较详细了

Umi(一个基于React的前端框架)中,多环境配置主要是为了支持开发、测试、生产等多个阶段的不同设置。Umi通过`.umirc.js`(或`.umi.config.js`)文件来管理项目的配置,你可以根据不同环境(如`development`, `production`等)创建不同的配置块。 以下是如何在Umi中进行多环境配置的基本步骤: 1. **创建`.umirc.js`文件**:如果还没有,你需要先初始化一个基本的Umi项目并生成这个文件。 ```js // .umirc.js 或 .umi.config.js module.exports = { // ... }; ``` 2. **添加环境变量**: - 添加默认环境配置: ```js env: { production: process.env.NODE_ENV === 'production', development: !process.env.NODE_ENV || process.env.NODE_ENV === 'development', // 非生产环境即视为开发环境 }, ``` - 根据环境加载对应的配置: ```js plugins: [ ['umi-plugin-react', { antd: true }], { enable: env.production, path: '@umijs/plugin-prod', options: {}, }, ], ``` 3. **针对不同环境修改配置**: - 对于开发环境,可以设置更详细的调试选项: ```js develop: { extraBabelPlugins: [['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }]], }, ``` - 生产环境可能需要压缩代码和开启性能优化: ```js build: { hash: true, minify: env.production, }, ``` 4. **环境切换**:在运行项目前,可以通过设置`NODE_ENV`环境变量来选择特定的环境。例如: - 开发环境:`npm run dev` - 生产环境打包:`npm run build -- --prod`
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值