时间戳

首页 > 解决方案 > angular cli 6 自定义构建选项（环境变量）

angular - angular cli 6 自定义构建选项（环境变量）

问题描述

好吧，我不喜欢在版本控制中使用环境变量，因为我希望能够在不重新部署应用程序的情况下配置应用程序。

我有一个问题。如何从 ng build 命令添加 angular cli 6 自定义选项？例如我要： ng build --api-url="http:/my-url.com" 换句话说，我该如何设置环境变量？

标签： angularangular-cli-v6

解决方案

我相信这可能会对你有所帮助。

对于我自己的项目，我有 4 个环境文件，

  1. environment.ts（对于我的本地主机）
  2. environment.dev.ts（用于我的开发测试服务器）
  3. environment.staging.ts（用于我的登台测试服务器）
  4. environment.prod.ts（用于我项目的生产服务器）

所有 4 个文件都有不同的 API URL（我的项目 API 调用的基本 URL），所以我需要为每个环境自定义构建。

现在我相信你的情况或多或少是一样的，所以我建议你创建不同的环境文件。

然后在您的angular.json文件中，您需要按如下方式定义这些配置：

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

定义完所有配置后，您需要做的就是运行带有配置选项的 ng build 命令。

  • 对于开发ng build --configuration=dev
  • 用于分期ng build --configuration=staging
  • 用于生产ng build --configuration=production

就是这样。现在您的构建将使用正确的环境文件。

推荐阅读