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

时间：2023-08-09 11:25:37

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

相关文章