Reactjs Gitlab CI和VITE环境变量出现问题

我已经搜索了(官方文件和感觉像是所有互联网的东西)，并测试了多种方法，但我永远也无法通过GitLab管道来理解VITE中的环境变量.

对于CRA，这很有效(使用CREATE_APP_var1).

现在，我的管道中有了以下设置，部署到开发人员和生产人员得到了不同的变量值集(为简洁起见):

stages:
  - build
  - image
  - chart
  - deploy
.build:
  stage: build
  image: node:16
  variables:
    CI: 'false'
    VITE_ENV: '$ENVIRONMENT'
    VITE_COMMIT: '$CI_COMMIT_MESSAGE'
  before_script:
    - printenv | grep -E '^(VITE_|ENVIRONMENT)' # this is to print what gitlab sees, and it sees the correct values from `build:dev:`-step
  script:
    - npm ci
    - npm run build
  artifacts:
    paths:
      - build
    expire_in: 2 weeks

build:dev:
  extends:
    - .build
  environment:
    name: Dev
  variables:
    ENVIRONMENT: 'development'
    IMAGE_NAME: 'image/path'
    VITE_var1: 'value1'
    VITE_TESTMESSAGE: 'This is a test message'
  only:
    - develop-branch

build:prod:
  extends:
    - .build
  variables:
    ENVIRONMENT: 'production'
    VITE_BUILD: '$CI_COMMIT_TAG'
    VITE_var1: 'value1'
    VITE_var2: 'value2'
  only:
    variables:
      - $CI_COMMIT_TAG =~ /^\d+\.\d+\.\d+$/

因此，我的流水线在推送到Development-BRANCH的任何提交时触发，并且对于生产只使用标记提交.到目前一切尚好.

在我的存储库中，我还有以下文件:

• .env.Development.local-加载良好，本地主机具有开发价值
• .env.Products-这在生产中有效，所有值都会被加载

现在，当我通过扩展Build:Dev传递到构建阶段时，我假设VITE_var1和VITE_TESTMESSAGE的值将"战胜"任何其他同名的变量.我像这样访问代码中的值，只是为了验证它是否工作:

config.js
console.log('VITE_var1 env', import.meta.env.VITE_var1); // returns prod value
console.log('VITE_TESTMESSAGE env', import.meta.env.VITE_TESTMESSAGE); // returns undefined

无论我在这里做什么，我都会从.env.product获取值(在运行dev-Steps时)，并且忽略ci文件中设置的变量.

我还try 设置.env.Development并在Package.json中运行单独的构建-开发脚本:

"build-dev": "tsc && vite build --mode development",

如果ci提交分支==开发分支:

- if [[ "$CI_COMMIT_BRANCH" == "Dev" ]]; then npm run build-dev; else npm run build; fi

任何关于我在这里显然不理解的问题的提示都将不胜感激.