umi多环境配置的实现

清疚 2022-12-02 04:07 362阅读 0赞

### 如何实现Umi多环境配置在实现 ###

在生产部署时，经常需要用到多环境变量的配置，特别是使用持续集成时，经常有好及格环境、测试、预生产、生产。

使用umi开发时，通过`process.env.NODE_ENV`可以判断出，当前是dev模式，还是生产模式

development模式即：开发模式  
production模式即：生产模式

只要是编译出来的，都是`production`模式，这是，就不好区分测试、预生产、生产了，怎么办呢？  
umi.js提供自定义多种umi.js配置文件的方式可解决

在项目根目录下，默认使用`.umirc.js`中的配置文件  
可以创建多个`.umirc.<markName>.js` 如 `.umirc.prod.js` `.umirc.test.js` 等，创建后，就可根据需要设置相关配置，那如何使用某个文件的配置呢？

这时，就需要在`package.json` 脚本中声明使用的配置文件了，如何声明呢？

"scripts": { 
        "build": "cross-env UMI_ENV=test umi build",
        "build:prod": "cross-env UMI_ENV=prod umi build",
        "lint:js": "eslint --ext .js src",
        "lint:style": "stylelint \"src/**/*.less\" --syntax less",
        "lint:stylefix": "stylelint \"src/**/*.less\" --fix",
        "start": "umi dev",
        "test": "cross-env BABELRC=none umi test",
        "precommit": "lint-staged"
      },

如上所示， 使用`cross-env UMI_ENV=test umi build` 即 `UMI_ENV=<markName>` markName就是对应的`.umirc.<markName>.js`。

需要注意： 如没有安装 `cross-env`则需要先安装 `yarn add cross-env --dev`

#### 如何自定义配置属性 ####

需要注意的是，配置文件中的配置项必须是合法的可配置项属性，如何没有该属性是会报错的，如何使用子定义的配置项呢？

`.umirc.js`

export default { 
    	publicPath: '/www',
    	define: { 
    	  'myVar': '/myLib'
    	}
    }

#### `document.ejs`中，如何使用自定义配置属性 ####

如上umirc.js中的配置项，在模板页面中引用如下