介绍

当你从你的 Angular 应用程序生成了构建文件后，你可以使用 ng build 命令来构建你的应用程序。加上参数 --configuration 或简单的 -c 标志，你可以指定你要构建的环境。在这个例子中，我们将介绍如何使用 ng build 命令来构建一个名为 staging 的环境，并设置一些 JavaScript 环境变量。

环境配置

首先，为了构建你的应用程序的 staging 环境，需要在你的 Angular 应用程序中的 angular.json 文件中定义一个名为 staging 的配置。

{
  ...
  "configurations": {
    "staging": {
      "fileReplacements": [{
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.staging.ts"
      }]
    }
  }
  ...
}

在上面的例子中，我们将 src/environments/environment.ts 文件替换为一个名为 src/environments/environment.staging.ts 的文件。你应该在 src/environments/environment.staging.ts 文件中定义你的 staging 环境变量。这和开发环境和生产环境一样，只是它只会在构建 staging 版本时被使用。

构建

现在我们已经定义了 staging 环境，我们可以使用以下命令来构建它：

ng build --configuration=staging

你还可以使用以下简写命令来完成相同的操作：

ng build -c staging

这将使用 staging 环境变量来构建你的应用程序，并生成构建文件在 dist 目录中的输出。

JavaScript 环境变量

当你构建你的应用程序时，你经常需要设置一些与你的应用程序相关的变量。你可以通过在你的应用程序中使用 Angular 环境来实现这一点。例如，在我们的 staging 环境中，我们可以设置以下 JavaScript 环境变量：

export const environment = {
  production: false,
  apiUrl: 'https://staging.api.example.com'
};

在构建 staging 版本时，这些变量将被使用。请注意，这些变量在编译时是不可更改的。如果你需要更改这些变量，请重新构建应用程序。

结论

使用 ng build 命令和 Angular 的环境配置，你可以很容易地构建你的应用程序的不同环境。加上 JavaScript 环境变量，你可以定制你的应用程序的行为并符合不同环境的需求。