如何实现apiBaseUrl动态化？根据环境自动导入对应配置文件

问题场景 #

你已经为应用配置了不同环境的API基础URL：

• 生产模式：https://example.com/
• 开发模式：http://localhost:8080/

对应的配置文件如下：

environment.prod.ts

export const environment = {
  production: true,
  apiBaseUrl: 'https://example.com/'
};

environment.ts

export const environment = {
  production: false,
  apiBaseUrl: 'http://localhost:8080/'
};

现在的问题是，在服务中使用时需要手动选择导入../environments/environment或../environments/environment.prod，希望能实现根据环境自动导入对应配置，动态切换apiBaseUrl。

解决方案（基于Angular CLI） #

Angular本身已经内置了环境配置的自动切换机制，不需要手动修改导入路径，按以下步骤操作即可：

1. 统一导入路径
   在所有需要使用环境配置的服务、组件中，始终只导入默认的environment.ts：

import { environment } from '../environments/environment';

2. 通过构建命令指定环境
   Angular CLI会根据你指定的构建环境，自动替换对应的配置文件：

• 开发模式（默认）：
  直接执行开发服务命令，CLI会自动使用environment.ts的配置：

  ng serve
  # 也可以明确指定开发环境
  ng serve --configuration development
  

  此时apiBaseUrl会自动使用http://localhost:8080/。

• 生产模式：
  执行生产构建命令，CLI会自动用environment.prod.ts替换默认的environment.ts：

  ng build --configuration production
  

  此时apiBaseUrl会切换为https://example.com/。

3. 验证配置
   可以在服务中添加日志确认当前配置：

import { Injectable } from '@angular/core';
import { environment } from '../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private readonly baseUrl = environment.apiBaseUrl;

  constructor() {
    console.log('当前API基础URL:', this.baseUrl);
  }
}

背后的原理 #

Angular的angular.json配置文件中，已经预设了不同环境的构建规则，其中fileReplacements字段定义了环境文件的替换逻辑：

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    // 其他生产环境相关配置...
  },
  "development": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.ts"
      }
    ]
    // 其他开发环境相关配置...
  }
}

当你执行对应环境的构建命令时，CLI会自动完成文件替换，所以你只需要保持统一的导入路径，无需手动切换。

内容的提问来源于stack exchange，提问作者xRay