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环境文件；而且使用环境变量可以实现跨域访问哦。为了避免报错，我们也应该保证环境文件内对象的属性应该相同；