Angular5.x多环境配置(开发环境、生产环境、测试环境)

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u010520626/article/details/80506748

实际开发中,我们经常需要配置多个环境,如:开发环境、生产环境、测试环境,比如接口的地址在不同环境下各有一个地址,如:

开发环境:http://dev.xxx.xxx

生产环境:http://www.xxx.xxx

测试环境:http://test.xxx.xxx

Angular给我们提供了一个很方便的方式,就是通过environment变量来控制

1、找到src/environments目录,用angular-cli工具创建的项目默认会有environment.prod.ts(生产环境)和environment.ts(开发环境),为了方便测试环境,我们再新建一个文件,命名为:environment.test.ts(测试环境),在这三个文件中写入不同环境下的变量值,如:

export const environment = {
  domainUrl:'我是测试环境的配置'

};

2、找到文件.angular-cli.json,在environments下增加一个测试环境的配置,如下:

"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts",
"test": "environments/environment.test.ts"
}


3、打包命令如下:

ng build --env=dev(打包开发环境)

ng build --env=prod(打包生产环境)

ng build --env=test(打包测试环境)

默认情况下,angular-cli创建的时候还会给我们在environment.ts/environment.prod.ts文件中创建一个变量production,该变量的作用就是控制是否开启Angular的开发模式,在main.ts中有这句代码:

if (environment.production) {
enableProdMode();
}
通过该变量值,我们就可以选择性的开启和关闭开发模式。
展开阅读全文

没有更多推荐了,返回首页