GitLab CI/CD环境变量无法传递至Firebase部署求助

问题分析 #

流水线执行成功但部署后所有环境变量显示为undefined，核心原因是Vite构建阶段未正确注入GitLab CI中的环境变量，或配置存在冗余覆盖逻辑。

解决方案 #

1. 移除GitLab CI中冗余的变量定义 #

你当前在variables块中重复定义了VITE_ENVIRONMENT: $VITE_ENVIRONMENT这类条目，这属于冗余配置——GitLab CI会自动将项目级配置的变量注入到流水线环境中，重复定义反而可能导致变量被意外覆盖为空。直接删除整个variables块即可。

2. 构建前验证变量加载状态 #

在npm run build前添加批量echo命令，确认所有需要的Vite环境变量已正确加载到流水线环境：

- echo "=== 检查环境变量 ==="
- echo "VITE_ENVIRONMENT: $VITE_ENVIRONMENT"
- echo "VITE_ANALYTICAL_URL_PRODUCTION: $VITE_ANALYTICAL_URL_PRODUCTION"
- echo "VITE_KRONOS_API_KEY_DEVELOPMENT: $VITE_KRONOS_API_KEY_DEVELOPMENT"

如果echo输出为空，需回到GitLab项目「设置-变量」页面检查：

• 确认变量名称完全匹配（大小写敏感）
• 确认变量的「可展开」选项已勾选
• 若main是受保护分支，非保护变量仍可访问；若变量设为保护状态，需确保分支为受保护分支

3. 确保代码中正确访问Vite环境变量 #

Vite不支持process.env，必须通过import.meta.env访问环境变量，示例：

// 正确写法
const apiKey = import.meta.env.VITE_KRONOS_API_KEY_DEVELOPMENT;
// 错误写法（会返回undefined）
const apiKey = process.env.VITE_KRONOS_API_KEY_DEVELOPMENT;

4. 修改后的GitLab CI配置示例 #

image: node:18

stages:
  - build_and_deploy

build_and_deploy:
  stage: build_and_deploy
  script:
    # 检查环境变量加载情况
    - echo "=== 检查环境变量 ==="
    - echo "VITE_ENVIRONMENT: $VITE_ENVIRONMENT"
    - echo "VITE_KRONOS_API_KEY_DEVELOPMENT: $VITE_KRONOS_API_KEY_DEVELOPMENT"

    # 安装依赖并构建项目
    - npm install
    - npm run build

    # 部署到Firebase
    - npm install -g firebase-tools
    - firebase deploy --only hosting --token $FIREBASE_TOKEN --project sop-generator
  only:
    - main

5. 额外排查点 #

• 检查package.json中的build命令是否为"build": "vite build"
• 若代码仓库中提交了.env文件，建议将其加入.gitignore，避免CI环境被本地配置干扰

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