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