Angular部署Vercel时无法读取Stage环境变量求助

问题背景 #

将Angular项目部署到Vercel的Preview（Stage）环境时，Vercel忽略Stage环境变量，仅读取Production环境变量。代码已提交到stage分支，Vercel能正确部署预览环境，但无法读取对应变量。本地执行以下命令构建一切正常：

npm run build -- --configuration stage
npm run build -- --configuration preview

Stage环境文件内容 #

export const environment = {
  production: false,
  API_URL: "https://Ichangedthevaluehere",
  API_LOGIN: "valuechangedhere",
  API_PASSWORD: "valuechangedhere",
  NAME: "Stage",
  VERCEL_GIT_COMMIT_SHA: "",
};

angular.json配置内容 #

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "thewordsthatiknow": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        },
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/thewordsthatiknow",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/ngx-toastr/toastr.css"
            ],
            "scripts": []
          },
          "configurations": {
            "preview": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.preview.ts"
                }
              ]
            },
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "4kb",
                  "maximumError": "8kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "preview": {
              "browserTarget": "thewordsthatiknow:build:preview"
            },
            "production": {
              "browserTarget": "thewordsthatiknow:build:production"
            },
            "development": {
              "browserTarget": "thewordsthatiknow:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "thewordsthatiknow:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/ngx-toastr/toastr.css"
            ],
            "scripts": []
          }
        }
      }
    }
  },
  "defaultProject": "thewordsthatiknow"
}

解决方案 #

1. 补充angular.json中的stage配置 #

你的angular.json里目前缺少stage对应的构建和启动配置，需要在build.configurations和serve.configurations中添加：

// 在build.configurations节点下添加
"stage": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.stage.ts"
    }
  ]
},

// 在serve.configurations节点下添加
"stage": {
  "browserTarget": "thewordsthatiknow:build:stage"
}

2. 配置Vercel分支专属构建命令 #

Vercel默认会使用Angular的默认构建配置（即你设置的defaultConfiguration: production），需要针对stage分支指定构建命令：

• 进入Vercel项目的Settings -> Git
• 在Branch Specific Settings中添加stage分支，设置构建命令为：

  npm run build -- --configuration stage
  

• 保存设置后重新部署stage分支

3. 验证构建配置 #

查看Vercel的构建日志，确认命令行中包含--configuration stage参数，确保构建过程使用了stage环境文件。

4. 可选：直接用Vercel环境变量注入 #

如果不想依赖文件替换，可以通过Vercel环境变量直接注入：

• 在Vercel项目Settings -> Environment Variables中，为stage分支添加对应变量（变量名需以NG_APP_开头，Angular才能识别）
• 修改environment.ts读取注入的变量：

  export const environment = {
    production: false,
    API_URL: import.meta.env.NG_APP_API_URL || "default-url",
    API_LOGIN: import.meta.env.NG_APP_API_LOGIN || "default-login",
    // 其他变量同理
  };
  

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