angular 配置開發環境、測試環境、生產環境

1. 配置開發環境、測試環境、生產環境

(1). environment.ts - 開發環境: 用於程序開發 （創建項目時自動生成）

export const environment = {
  production: false,
  baseUrl: 'http://192.168.182.66:8089', // 測試環境服務器地址(請求數據地址)
  isPass: true, // 定義變量   
};

(2). environment.test.ts - 測試環境: 用於程序完成，測試產品 (手動創建)

// 測試環境
export const environment = {
    production: false,
    baseUrl: 'http://221.30.191.74:8083'
};

(3). environment.pro.ts - 生產環境: 測試完成，可對外開發 (創建項目時自動生成)

// 生產環境
export const environment = {
  production: true,
  baseUrl: 'http://221.30.191.74:8083'
};

2. 配置angular.json, 使構建的時候，可替換為相應的環境文件；

• 第一步. 復制production (位置:projects => 項目名 => architect => build => configurations => production)
• 第二步. 配置構建時需要替換的環境配置文件

"test": {
    "fileReplacements": [
        {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.test.ts"
        }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true
}

3. 構建所需環境的項目

//構建生產環境，使用environment.prod.ts (默認使用的就是這個)
ng build

//構建測試環境，使用environment.test.ts (=后面的值和angular.json中的配置的大對象的key值相同)
ng build --configuration=test

//構建時，可使用的額外的命令
--prod :   壓縮構建文件
--base-href /前綴/ :  為瀏覽器中項目路由路徑添加統一的前綴；；；； 比如開發時默認訪問路徑是http:IP地址/#/home;;;;;; 打包后的相同頁面的訪問：http:IP地址/#/瀏覽器中項目路由路徑的前綴/home

---

原理說明：

在程序開發時，我們使用的是environment.ts文件，當我們ng build.. 構建我們的項目的時候，angular會根據--configuration=后面的參數和angular.json文件的配置，來決定，將開發環境environment.ts文件替換為哪個environment-test/prod/demo...ts環境文件；而且使用環境變量可以實現跨域訪問哦。為了避免報錯，我們也應該保證環境文件內對象的屬性應該相同；