umi 配置多環境打包

平時我們開發應用時環境有開發環境、測試環境、生產環境等,此時我們需要配置不同的環境,獲取不同的apiUrl前綴，以滿足日常開發需要。

1.安裝 cross-env 插件

npm install --save-dev cross-env

2.在config/config.js文件裏配置開發環境的apiUrl

 define: {
    "process.env.apiUrl":'https://www.dev.com/'
  },

3.複製兩次config/config.js，並更改文件名爲config/config.test.js 和 config/config.prod.js,分別配置apiUrl

// config.test.js
 define: {
    "process.env.apiUrl":'https://www.test.com/'
  },

// config.prod.js
 define: {
    "process.env.apiUrl":'https://www.prod.com/'
  },

4.在其他文件可以獲取process.env.apiUrl 作爲url前綴,如封裝axios的request.js

// request.js
console.log(process.env.apiUrl);

5.在package.json 的scripts處配置打包命令

"build-dev": "cross-env UMI_ENV=dev umi dev",
"build-test": "cross-env UMI_ENV=test umi build",
"build-prod": "cross-env UMI_ENV=prod umi build",