比如接口的地址在不同环境下各有一个地址,如:
开发环境:http://dev.xxx.xxx
测试环境:http://test.xxx.xxx
生产环境:http://www.xxx.xxx
Angular给我们提供了一个很方便的方式,就是通过environment变量来控制
1、找到src/environments目录,
用@angular/cli工具创建的项目默认会有environment.prod.ts(生产环境)
和environment.ts(开发环境),为了方便测试环境,我们再新建一个文件,
命名为:environment.test.ts(测试环境),
在这三个文件中写入不同环境下的变量值,如:
// 其中 production 为是否按照生成环境打包代码 // environment.ts export const environment = { production: false, domainUrl:'http://dev.xxx.xxx' }; // environment.test.ts export const environment = { production: true, domainUrl:'http://test.xxx.xxx' }; // environment.prod.ts export const environment = { production: true, domainUrl:'http://www.xxx.xxx' };
后面步骤要分为angular5及以下和angular6及以上
2、angular5及以下 配置.angular-cli.json
找到文件.angular-cli.json,在environments下增加一个测试环境的配置,如下:
"environments": { "dev": "environments/environment.ts", "test": "environments/environment.test.ts", "prod": "environments/environment.prod.ts" }
3、angular5及以下 打包命令如下:
ng build --env=prod(打包生产环境) ng build --env=test(打包测试环境)
2、angular6及以上 配置angular.json
找到 projects - architect - build - configurations 增加一个测试环境的配置,配置如下:
"test": { "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.test.ts" } ] }
3、angular6及以上 打包命令如下:
ng build --prod --configuration=production(打包生产环境) ng build --prod --configuration=test(打包测试环境)
4、在代码中使用环境变量
(1)可以在tsconfig.json 中的 paths 对象中添加配置
"@env/*": ["environments/*"](2)其他需要用到的组件服务中引入
import { environment } from '@env/environment'; // 即可使用 environment 对象的一些属性如: // environment.domainUrl
默认情况下,@angular/cli创建的时候还会给我们在environment.ts/environment.prod.ts文件中创建一个变量production,该变量的作用就是控制是否开启Angular的开发模式,在main.ts中有这句代码:
if (environment.production) { enableProdMode(); }通过该变量值,我们就可以选择性的开启和关闭开发模式。
2019-05-26 22:33