Angular5.x多環境配置(開發環境、生產環境、測試環境)

實際開發中,我們經常需要配置多個環境,如:開發環境、生產環境、測試環境,比如接口的地址在不同環境下各有一個地址,如:

開發環境:http://dev.xxx.xxx

生產環境:http://www.xxx.xxx

測試環境:http://test.xxx.xxx

Angular給我們提供了一個很方便的方式,就是通過environment變量來控制

1、找到src/environments目錄,用angular-cli工具創建的項目默認會有environment.prod.ts(生產環境)和environment.ts(開發環境),爲了方便測試環境,我們再新建一個文件,命名爲:environment.test.ts(測試環境),在這三個文件中寫入不同環境下的變量值,如:

export const environment = {
  domainUrl:'我是測試環境的配置'

};

2、找到文件.angular-cli.json,在environments下增加一個測試環境的配置,如下:

"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts",
"test": "environments/environment.test.ts"
}


3、打包命令如下:

ng build --env=dev(打包開發環境)

ng build --env=prod(打包生產環境)

ng build --env=test(打包測試環境)

默認情況下,angular-cli創建的時候還會給我們在environment.ts/environment.prod.ts文件中創建一個變量production,該變量的作用就是控制是否開啓Angular的開發模式,在main.ts中有這句代碼:

if (environment.production) {
enableProdMode();
}
通過該變量值,我們就可以選擇性的開啓和關閉開發模式。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章