构建Vue项目Docker镜像时Cloud Build环境变量未生效

核心问题分析 #

你当前的配置存在两个关键问题：

1. Dockerfile中直接引用的${_VUE_APP_BACKEND_SERVER}是Cloud Build的substitution变量，这个变量不会自动传递到Docker构建阶段，只有Cloud Build的配置文件（cloudbuild.yaml）会解析该变量。
2. 虽然cloudbuild.yaml中通过--build-arg=ENV=$_VUE_APP_BACKEND_SERVER传递了构建参数，但Dockerfile中没有声明对应的ARG来接收这个参数，导致ENV赋值时使用了未定义的变量，最终输出为空。

修复步骤 #

1. 修改Dockerfile，正确接收构建参数并设置环境变量 #

Docker构建阶段需要先通过ARG声明接收来自Cloud Build的参数，再将其赋值给ENV（确保Vue构建时能读取到）：

FROM node:lts-alpine as build-stage
# 声明ARG接收Cloud Build传递的构建参数
ARG VUE_APP_BACKEND_SERVER
# 将ARG的值赋值给ENV，Vue构建时会注入该变量
ENV VUE_APP_BACKEND_SERVER=${VUE_APP_BACKEND_SERVER}
RUN echo "server env is:"
RUN echo $VUE_APP_BACKEND_SERVER
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run gcpbuild

2. 调整cloudbuild.yaml的build-arg参数 #

将原本的--build-arg=ENV=$_VUE_APP_BACKEND_SERVER改为匹配Dockerfile中声明的ARG名称，确保参数正确传递：

steps:
  - name: gcr.io/cloud-builders/docker
    args:
      - build
      - '--no-cache'
      - '-t'
      - '$_GCR_HOSTNAME/$PROJECT_ID/$REPO_NAME/$_SERVICE_NAME:$COMMIT_SHA'
      - front
      - '-f'
      - front/Dockerfile
      # 传递与Dockerfile中ARG同名的参数
      - '--build-arg=VUE_APP_BACKEND_SERVER=$_VUE_APP_BACKEND_SERVER'
    id: Build
...
...
options:
  substitutionOption: ALLOW_LOOSE
substitutions:
  _VUE_APP_BACKEND_SERVER: 'https://backend.url'

3. 验证Vue应用中的变量读取 #

确保你的Vue代码中通过process.env.VUE_APP_BACKEND_SERVER读取环境变量，Vue会在构建阶段将以VUE_APP_开头的环境变量注入到应用中。

额外说明 #

• Cloud Build的substitution变量仅在cloudbuild.yaml文件内部生效，无法直接在Dockerfile中引用，必须通过--build-arg显式传递。
• Vue要求环境变量必须以VUE_APP_为前缀，否则构建时不会将其注入到应用中，这一点要严格遵守。

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