Ionic iOS项目：从配置文件读取Backend URL实现环境切换

Hey there! 针对Ionic iOS应用里开发/生产环境后端URL切换的问题，我有几个实用的方案，不用改业务代码就能轻松搞定，咱们一个个来看：

Ionic本身支持通过环境变量和配置文件区分不同环境，步骤很清晰：

1. 创建环境配置文件
   在项目根目录下新建.env.dev和.env.prod两个文件，分别存放开发、生产环境的后端URL：

# .env.dev
BACKEND_URL=https://dev-api.yourdomain.com

# .env.prod
BACKEND_URL=https://prod-api.yourdomain.com

记得把.env*加到.gitignore里，别把敏感配置提交到代码库。

2. 映射环境变量到代码
   在src/environments目录下，更新environment.ts和environment.prod.ts，把环境变量读进来：

// src/environments/environment.ts（开发环境）
export const environment = {
  production: false,
  backendUrl: process.env.BACKEND_URL || 'https://default-api.yourdomain.com'
};

// src/environments/environment.prod.ts（生产环境）
export const environment = {
  production: true,
  backendUrl: process.env.BACKEND_URL || 'https://default-api.yourdomain.com'
};

3. 配置Angular构建参数
   打开angular.json，找到projects -> your-app-name -> architect -> build -> configurations，完善dev和prod的配置：

"configurations": {
  "dev": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.ts"
      }
    ],
    "envFile": ".env.dev"
  },
  "prod": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "envFile": ".env.prod",
    "optimization": true,
    "outputHashing": "all",
    // 其他生产构建优化参数...
  }
}

4. 指定环境运行/构建
   开发调试时执行：

ionic serve --configuration=dev

构建生产包并同步到iOS时执行：

ionic build --configuration=prod && npx cap sync ios

这样打包出的iOS应用会自动使用生产环境的URL。

如果想贴近iOS原生配置流程，可以用Capacitor的配置或iOS Info.plist实现：

1. 在iOS Info.plist中添加配置
   打开Xcode，找到项目的Info.plist，为Debug和Release配置分别设置BackendURL：

• Debug配置：BackendURL值为https://dev-api.yourdomain.com
• Release配置：BackendURL值为https://prod-api.yourdomain.com

2. 在Ionic代码中读取配置
   用Capacitor的Config插件读取原生配置：

import { Config } from '@capacitor/config';

async function getBackendUrl() {
  const { value } = await Config.get('BackendURL');
  return value || 'https://default-api.yourdomain.com';
}

之后在需要调用后端的地方，调用这个函数获取URL即可。

如果需要打包后无需重新构建就能修改URL，可以把配置放在assets/config.json里：

1. 创建外部配置文件

// assets/config.json
{
  "devUrl": "https://dev-api.yourdomain.com",
  "prodUrl": "https://prod-api.yourdomain.com"
}

2. APP初始化时加载并选择URL
   在app.component.ts的ngOnInit中加载配置，根据当前环境自动切换：

import { HttpClient } from '@angular/common/http';
import { Platform } from '@ionic/angular';

export class AppComponent {
  backendUrl: string = '';

  constructor(private http: HttpClient, private platform: Platform) {}

  async ngOnInit() {
    const config = await this.http.get('/assets/config.json').toPromise();
    // 判断是开发环境还是原生生产环境
    if (this.platform.is('hybrid') && !this.platform.is('dev')) {
      this.backendUrl = config['prodUrl'];
    } else {
      this.backendUrl = config['devUrl'];
    }
    // 把URL存到全局服务，供其他组件调用
  }
}

这种方式的好处是，打包成iOS应用后，你可以直接修改App/App/public/assets/config.json文件，无需重新编译就能切换后端URL。

这几个方案都不用改动业务逻辑代码，选最适合你团队流程的就行～

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