angular7的多环境（开发环境、测试环境、生产环境）配置

绝地灬酷狼 2022-02-01 03:51 566阅读 0赞

在angular程序开发的时候，我们一般会使用三种环境，比如：开发环境、测试环境、生产环境。针对不同的环境使用不同的代码，比如接口地址。

#### 配置开发环境、测试环境、生产环境 ####

**开发环境：environment.ts——用于程序开发 （创建项目时自动生成）**

export const environment = {
      production: false,
      baseUrl: '开发环境url'
    };

**测试环境：environment.test.ts——用于程序完成，测试产品 (手动创建)**

export const environment = {
        production: true,
        baseUrl: '测试环境url'
      };

**生产环境：environment.prod.ts——测试完成，可对外开发 (创建项目时自动生成)**

export const environment = {
      production: true,
      baseUrl: '生产环境url'
    };

#### 配置angular.json, 在构建的时候，可替换为相应的环境文件； ####

比如添加测试(test)环境文件：

**首先在angular.json文件中复制production部分代码，然后放在当前代码的后面，将`production`更改为`test`, 文件引用更改为`environment.test.ts`**

"production": {
    "fileReplacements": [
         {
           "replace": "src/environments/environment.ts",
           "with": "src/environments/environment.prod.ts"
         }
       ],
       "optimization": true,
       "outputHashing": "all",
       "sourceMap": false,
       "extractCss": true,
       "namedChunks": false,
       "aot": true,
       "extractLicenses": true,
       "vendorChunk": false,
       "buildOptimizer": true,
       "budgets": [
         {
           "type": "initial",
           "maximumWarning": "2mb",
           "maximumError": "5mb"
         }
       ]
     },

**复制更改后的代码为：**

"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,
     "budgets": [
       {
         "type": "initial",
         "maximumWarning": "2mb",
         "maximumError": "5mb"
       }
     ]
    }

#### 配置不同环境下的url ####

http.service.ts

import { environment } from '../../environments/environment';
    
    console.log(environment.baseUrl);

#### 构建所需环境的项目 ####

1.  构建生产环境项目

// 默认使用的就是environment.prod.ts
    ng build

1.  构建测试环境项目

ng build --configuration=test

1.  开发环境

ng serve // 直接启动默认就是生产环境

1.  压缩文件

--prod :   压缩构建文件
    ng build --prod

#### 不同环境构建截图 ####

1.  生产环境  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]
2.  测试环境  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]
3.  开发环境  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20220201/58d3b7113da74b819ff7532726e4da90.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]: /images/20220201/55bcd304dd834b10a1c0f0bd2ba2639c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 2]: /images/20220201/a7857a79c5e84484a3413420bffe4adf.png