10-UMI4配置相关讲解

回顾

Umi 可以通过环境变量来完成一些特殊的配置和功能。

如何设置环境变量

执行命令时设置

例如需要改变 umi dev 开发服务器的端口，进可以通过如下命令实现。

# OS X, Linux
$ PORT=3000 umi dev 
# Windows (cmd.exe)
$ set PORT=3000&&umi dev

如果需要同时在不同的操作系统中使用环境变量，推荐使用工具 cross-env

$ pnpm install cross-env -D
$ cross-env PORT=3000 umi dev

设置在 .env 文件中

如果你的环境变量需要在开发者之间共享，推荐你设置在项目根目录的 .env 文件中，例如:

# file .envPORT=3000BABEL_CACHE=none

然后执行，

$ umi dev

umi 会以 3000 端口启动 dev server，并且禁用 babel 的缓存。

如果你有部分环境变量的配置在本地要做特殊配置，可以配置在 .env.local 文件中去覆盖 .env 的配置。比如在之前的 .env 的基础上, 你想本地开发覆盖之前 3000 端口, 而使用 4000 端口，可以做如下定义。

# file .env.localPORT=4000

umi 会以 4000 端口启动 dev server，同时保持禁用 babel 的缓存。

此外 umi .env 文件中还支持变量的方式来配置环境变量。例如：

# file .env.local
FOO=foo
BAR=bar

CONCAT=$FOO$BAR # CONCAT=foobar

注意：

• 不建议将 .env.local 加入版本管理中。

UMI_ENV

当指定 UMI_ENV 时，会额外加载指定值的配置文件，优先级为：

• config.ts
• config.${UMI_ENV}.ts
• config.${dev | prod | test}.ts
• config.${dev | prod | test}.${UMI_ENV}.ts
• config.local.ts

若不指定 UMI_ENV ，则只会加载当前环境对应的配置文件，越向下的越具体，优先级更高，高优的配置可以往下移动。

注：根据当前环境的不同，dev, prod, test 配置文件会自动加载，不能将 UMI_ENV 的值设定成他们。

编写

我们将package.json文件编写入cross-env内容，并将UMI_ENV写入到文件中。代码如下：

{  
    "private": true,  
    "author": "yycxx <yyi99yy@163.com>",  
    "scripts": {  
    "build": "cross-env UMI_ENV=pro max build",  
    "build:proandrel": "cross-env UMI_ENV=prorelease max build && cross-env UMI_ENV=release max build",  
    "build:prorelease": "cross-env UMI_ENV=prorelease max build",  
    "build:release": "cross-env UMI_ENV=release max build",  
    "build:test": "cross-env UMI_ENV=test umi build",  
    "dev": "max dev",  
    "postinstall": "max setup",  
    "lint": "umi lint",  
    "lint:css": "stylelint src/**/*.less --fix --custom-syntax postcss-less",  
    "openapi": "umi openapi",  
    "prepare": "husky install",  
    "prettier": "prettier -c --write \"src/**/*\"",  
    "setup": "max setup",  
    "start": "cross-env PORT=9933 MOCK=none max dev",  
    "start:dev": "cross-env PORT=9933 REACT_APP_ENV=dev MOCK=none UMI_ENV=dev max dev",  
    "start:mock": "cross-env PORT=9933 npm run dev",  
    "start:pro": "cross-env PORT=9933 UMI_ENV=pro MOCK=none max dev",  
    "start:prorelease": "cross-env PORT=9933 UMI_ENV=prorelease MOCK=none max dev",  
    "start:release": "cross-env PORT=9933 UMI_ENV=release MOCK=none max dev",  
    "start:test": "cross-env PORT=9933 REACT_APP_ENV=test MOCK=none UMI_ENV=test max dev",  
    "test": "jest"  
    },  
    "dependencies": {  
    "@ant-design/icons": "^5.0.1",  
    "@ant-design/pro-components": "^2.4.4",  
    "@umijs/max": "^4.0.72",  
    "antd": "^5.4.0"  
    },  
    "devDependencies": {  
    "@types/react": "^18.0.33",  
    "@types/react-dom": "^18.0.11",  
    "cross-env": "^7.0.3",  
    "husky": "^8.0.3",  
    "lint-staged": "^13.2.0",  
    "prettier": "^2.8.7",  
    "prettier-plugin-organize-imports": "^3.2.2",  
    "prettier-plugin-packagejson": "^2.4.3",  
    "typescript": "^5.0.3"  
    }  
}

验证

输入npm start，看到我们指定的cross-env PORT运行端口生效，即可！