Angular5：面向多客户部署Angular应用的配置方案问询

我在做Angular多客户部署项目时，经常遇到这个需求——总不能为每个客户单独构建一次吧？下面几个方案都是我实践过的，不用重新编译就能修改服务URL，完全符合你的需求：

方案1：Assets目录下的JSON配置文件（最通用） #

这个方案的核心是把配置放在assets文件夹里，因为这个目录下的文件会被直接复制到构建后的dist目录，不会被Angular编译打包，客户可以直接修改这个文件。

• 第一步：在src/assets下创建config.json文件，写入服务URL配置：

{
  "apiBaseUrl": "https://customer-specific-api.com/api"
}

• 第二步：创建一个配置服务来加载这个文件，确保应用启动时就能拿到配置：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AppConfigService {
  private configData: any;

  constructor(private http: HttpClient) {}

  loadConfig(): Observable<any> {
    return this.http.get('/assets/config.json').pipe(
      (response) => {
        this.configData = response;
        return response;
      }
    );
  }

  getApiBaseUrl(): string {
    // 给个默认值，防止客户忘记修改导致报错
    return this.configData?.apiBaseUrl || 'https://default-api.com/api';
  }
}

• 第三步：在应用启动前加载配置，修改main.ts：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { AppConfigService } from './app/app-config.service';
import { HttpClientModule } from '@angular/common/http';
import { importProvidersFrom } from '@angular/core';

// 先加载配置再启动应用
platformBrowserDynamic([
  importProvidersFrom(HttpClientModule),
  AppConfigService
])
  .bootstrapModule(AppModule)
  .then(() => {
    const configService = platformBrowserDynamic.injector.get(AppConfigService);
    return configService.loadConfig();
  })
  .catch(err => console.error('配置加载失败:', err));

部署后，客户只需要打开dist/assets/config.json修改URL即可，完全不用重新构建。

方案2：利用环境变量（适合支持环境变量的服务器） #

如果客户的服务器支持设置环境变量（比如Nginx、Apache或者Docker容器），这个方案更灵活，不用手动修改文件。

• 第一步：在index.html的<head>里添加全局变量占位符：

<script>
  window.APP_CONFIG = {
    apiBaseUrl: '%API_BASE_URL%'
  };
</script>

• 第二步：构建后用脚本替换占位符。比如Linux服务器上用sed命令：

# 替换dist/index.html里的占位符为客户的API地址
sed -i 's/%API_BASE_URL%/https://customer-api.com/api/g' dist/your-app-name/index.html

如果是Docker部署，可以在Dockerfile里添加这个替换步骤，或者用环境变量传递值。

• 第三步：在Angular里读取全局变量：

// 可以直接在服务或组件里使用
export const API_BASE_URL = window.APP_CONFIG?.apiBaseUrl || 'https://default-api.com/api';

客户只需要在服务器上设置好环境变量或者运行替换脚本就行，不用碰前端文件内容。

方案3：服务器端动态注入配置（适合有后端/反向代理的场景） #

如果客户用Nginx、Apache做反向代理，或者有自己的后端服务，可以让服务器在返回index.html时动态替换配置。

比如Nginx配置里添加sub_filter模块来替换占位符：

location / {
  root /path/to/dist;
  # 替换index.html里的占位符为客户的API地址
  sub_filter '%API_BASE_URL%' 'https://customer-api.com/api';
  sub_filter_once off;
  try_files $uri $uri/ /index.html;
}

这样每次请求index.html时，Nginx会自动替换占位符，客户只需要修改Nginx配置即可，非常适合运维能力强的客户。

关键注意事项 #

• 一定要给配置设置默认值，避免客户忘记修改导致应用崩溃。
• 配置加载时要处理失败情况，比如显示错误提示或者降级到默认配置。
• 方案1的JSON文件是同域请求，不会有跨域问题，放心使用。

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