environment是什么？

我們?cè)谟胊ngular-cli創(chuàng)建angular項(xiàng)目時(shí)凌那，會(huì)默認(rèn)生成一個(gè)environment文件

image.png

里面會(huì)有兩個(gè)文件

environment.ts

// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.
//在生成過(guò)程中胧沫，可以使用“fileReplacements”數(shù)組替換此文件昌简。
//“ng build--prod”將“environment.ts”替換為“environment.prod.ts”。
//文件替換列表可以在“angular.json”中找到绒怨。
export const environment = {
  production: false,
  baseUrl:'http://dev.test.com'
};
/*
 * For easier debugging in development mode, you can import the following file
 * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
 *
 * This import should be commented out in production mode because it will have a negative impact
 * on performance if an error is thrown.
 */
// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
/*

*為了便于在開發(fā)模式下調(diào)試纯赎，可以導(dǎo)入以下文件

*忽略與區(qū)域相關(guān)的錯(cuò)誤堆棧幀，如“zone.run”窖逗、“zoneDelegate.invokeTask”址否。

*這個(gè)導(dǎo)入應(yīng)該在生產(chǎn)模式中被注釋掉餐蔬，因?yàn)樗鼤?huì)產(chǎn)生負(fù)面影響

*如果拋出錯(cuò)誤碎紊，將影響性能。

*/

//導(dǎo)入'zone.js/dist/zone error'樊诺；//包括在Angular CLI中仗考。

environment.prod.ts

export const environment = {
  production: true,
  baseUrl: 'http://prod.test.com'
};

這兩個(gè)文件都有一個(gè)production參數(shù)，為是否是生產(chǎn)環(huán)境词爬，想到這里就一目了然秃嗜，我們打包后，生效的肯定是environment.prod.ts文件配置，值為true,實(shí)際我們?cè)诒镜卣{(diào)試時(shí)锅锨，生效的是environment.ts文件叽赊，打包后會(huì)去自動(dòng)替換成environment.prod.ts，其中的baseUrl參數(shù)是我們自定義添加的url地址必搞，針對(duì)不同環(huán)境會(huì)自動(dòng)調(diào)用對(duì)應(yīng)的地址必指，我們本地環(huán)境中調(diào)試可以調(diào)用一下這個(gè)environmentts

import {environment} from '../../environments/environment'
@Injectable()
export class InterceptorInterceptor implements HttpInterceptor {
  baseUrl = environment.baseUrl;
  constructor(private $commom: CommonService) {
    console.log(this.baseUrl);
   }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      tap((event: any) => {
        if (event instanceof HttpResponseBase) this.handleData(event);
        return of(event)
      }),
      catchError((err: HttpErrorResponse) => this.handleData(err))
    )
  }

  private handleData(res: HttpResponseBase): Observable<any> {
    console.log(res);
    if (res instanceof HttpResponse) {
      let body = (res as any).body;
      if (body.code != 200) {
        this.$commom.error(body.message);
      }
      if (body.code === 1003) {
          /**todo  =>  jump()*/
      }
    }
    if (res instanceof HttpErrorResponse) {
      this.$commom.error(res.error);
    }
    return of(res)
  }
}

啟動(dòng)服務(wù)后，我們請(qǐng)求下接口恕洲，發(fā)現(xiàn)默認(rèn)的地址是http://dev.test.com

image.png

我們需要打包塔橡，然后再看看這個(gè)baseUrl打印的是什么，打包的時(shí)候需要輸入 ng build --prod -c production

image.png

image.png

多環(huán)境配置baseUrl

多環(huán)境的情況下，我們有多個(gè)url呕屎，讓其自動(dòng)切換让簿，此時(shí)假如我還有個(gè)測(cè)試環(huán)境,那就需要再建一個(gè)environment.test.ts文件

image.png

image.png

image.png

image.png