umi 配置多環境打包

摘要： 平時我們開發應用時環境有開發環境、測試環境、生產環境等,此時我們需要配置不同的環境,獲取不同的apiUrl字首，以滿足日常開發需要。 1.安裝 cross-env 外掛 npm install --save-dev cross-env 2.在config/config.js檔案裡配...

平時我們開發應用時環境有開發環境、測試環境、生產環境等,此時我們需要配置不同的環境,獲取不同的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",