Angular 多环境配置

2019-5-19 一诺 js库

实际开发中,我们经常需要配置多个环境,如:开发环境、测试环境、生产环境。
比如接口的地址在不同环境下各有一个地址,如:
开发环境: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
写的不错
一诺
2019-05-26 22:27
https://www.yuanqiao.pw/
dsfdsfs

发表评论:

皖ICP备15010162号-1 @2015 勿恨水长东
qq:1614245331 邮箱:13515678147@163.com Powered by emlog