GitLab CI与VITE环境变量配置异常问题求助

问题原因分析 #

1. Vite构建默认mode为production：执行vite build时默认使用production模式，会优先加载.env.production文件，导致你在CI中设置的VITE_var1被该文件的值覆盖，新增的VITE_TESTMESSAGE因不在.env.production中返回undefined。
2. 分支判断条件错误：你尝试的分支判断[[ "$CI_COMMIT_BRANCH" == "Dev" ]]与实际分支名develop-branch不匹配，导致build-dev命令从未被执行。
3. CI变量传递的优先级误解：虽然系统环境变量（GitLab CI设置的）优先级高于.env文件，但前提是Vite在对应mode下加载，否则会读取对应mode的.env文件覆盖变量。

修复步骤 #

1. 修正构建命令的分支判断逻辑 #

将GitLab CI脚本中的分支判断改为匹配实际分支名，确保dev分支构建使用development mode：

script:
  - npm ci
  - if [[ "$CI_COMMIT_BRANCH" == "develop-branch" ]]; then npm run build-dev; else npm run build; fi

对应的package.json脚本保持：

"scripts": {
  "build": "tsc && vite build",
  "build-dev": "tsc && vite build --mode development"
}

2. 调整GitLab CI的CI变量配置 #

移除CI: 'false'设置——Vite在CI环境下会自动跳过.env.local类文件（这类文件通常不提交到仓库），避免因加载不存在的.env.development.local引发意外行为。修改后的.build模板：

.build:
  stage: build
  image: node:16
  variables:
    VITE_ENV: '$ENVIRONMENT'
    VITE_COMMIT: '$CI_COMMIT_MESSAGE'
  before_script:
    - printenv | grep -E '^(VITE_|ENVIRONMENT)'
  script:
    - npm ci
    - if [[ "$CI_COMMIT_BRANCH" == "develop-branch" ]]; then npm run build-dev; else npm run build; fi
  artifacts:
    paths:
      - build
    expire_in: 2 weeks

3. 确保环境变量优先级生效 #

Vite的环境变量加载优先级为：系统环境变量（GitLab CI设置的） > .env.[mode].local > .env.local > .env.[mode] > .env。只要dev构建使用development mode，CI中设置的VITE_var1和VITE_TESTMESSAGE就会覆盖.env.development（若存在）中的值，同时不会加载.env.production，避免prod值覆盖问题。

4. 可选：统一环境变量文件管理 #

如果不需要在CI中单独设置变量，可在.env.development中配置dev环境变量并提交到仓库，dev构建时会自动加载，同时CI变量依然可以动态覆盖这些值。

验证方法 #

通过before_script中的打印命令确认VITE_var1和VITE_TESTMESSAGE输出为正确的dev值，构建完成后查看build目录下的打包产物，检查JS文件中import.meta.env的实际值是否符合预期。

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