Angular 12 区域环境切换器

代码示例：(假设有三个环境：开发环境(dev)、测试环境(test)、生产环境(prod))

1. 在src/environments目录下创建不同的环境配置文件：environment.prod.ts、environment.test.ts、environment.dev.ts， 可以根据实际需求进行修改。

environment.prod.ts

export const environment = {
  production: true,
  apiEndpoint: 'http://prod-api.example.com'
};

environment.test.ts

export const environment = {
  production: false,
  apiEndpoint: 'http://test-api.example.com'
};

environment.dev.ts

export const environment = {
  production: false,
  apiEndpoint: 'http://dev-api.example.com'
};

2. 创建一个新的文件：environment.ts，用于导出当前环境配置。

environment.ts

import { environment as common } from './environment.common';
import { environment as local } from './environment.dev';
import { environment as staging } from './environment.test';
import { environment as prod } from './environment.prod';

const environments = {
  local,
  staging,
  prod
};

export const environment = Object.assign({}, common, environments[process.env.APP_ENV]);

在此示例中，我们假设可以通过环境变量APP_ENV动态切换环境变量。将当前环境的配置与公共配置一起合并，并将其导出作为当前使用的环境对象。

3. 安装cross-env，使用npm install --save-dev cross-env命令安装依赖。

4. 在package.json中配置不同环境的命令：

"scripts": {
  "start": "cross-env APP_ENV=local ng serve",
  "build": "cross-env APP_ENV=prod ng build --prod",
  "build:test": "cross-env APP_ENV=staging ng build --configuration=test",
  "build:dev": "cross-env APP_ENV=dev ng build"
}

在不同的命令中使用cross-env设置APP_ENV环境变量来切换不同的环境配置。

现在，当我们运行npm start时，将会使用本地开发环境的配置；运行npm run build时将会使用生产环境的配置。

运行npm run build:test时将会使用测试环境的配置，同时也可以为不同的环境运行不同的自定义构建命令。