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

在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

2. 构建测试环境项目

ng build --configuration=test

3. 开发环境

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

4. 压缩文件

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

不同环境构建截图

1. 生产环境
   
2. 测试环境
   
3. 开发环境