UMI多環境配置

一般來說項目不止有dev和prod兩個環境，umi可以通過環境變量 UMI_ENV 區分不同環境來指定配置。

需求：三套環境->本地環境localtest、測試釋出環境testbuild、正式環境probuild

1.在根目錄建立.umirc.localtest.ts、.umirc.testbuild.ts、.umirc.probuild.ts三個配置檔案。

每個檔案中按照以下方式定義變量，一般可包括測試賬戶的賬号密碼、請求字首等。

export default {
  define: {
    loginName:'zhangsan',        //登入名
    loginPassword:'****',        //登入密碼
    prefix:'',                   //請求字首
  },
};
           

1. 安裝cross-env，這個包是可以在跨平台設定環境變量。

package.json檔案：
"scripts": {
    "start:localtest": "cross-env UMI_ENV=localtest umi dev",  //設定UMI_ENV為localtest
    "start:testbuild": "cross-env UMI_ENV=testbuild umi dev",
    "start:probuild": "cross-env UMI_ENV=probuild umi dev",
    "build:testbuild": "cross-env UMI_ENV=testbuild umi build",
    "build:probuild": "cross-env UMI_ENV=probuild umi build",
  },
           

運作npm run start:localtest 即可運作localtest環境 同理其他環境

3.在頁面中直接使用變量

console.log(loginName,loginPassword,prefix)

例：

if(!loginName||!loginPassword){
  message.error('登入名或密碼為空')
  return
}
let param={
  loginName,
  loginPassword
}
dispatch({
  type: 'loginModal/login',
  payload: {
    param
  },
})
           

注：如果項目的配置比較複雜，可以将配置寫在 config/config.ts 中。