Vite+Vue3生产环境变量访问问题求助（部署至Cloud Run）

1. 修复Dockerfile的COPY错误 #

你当前Dockerfile第一行的COPY ./.env.production/ /存在两个问题：

• 目标路径错误：应该将env文件复制到项目工作目录，而非根目录
• 源路径错误：你指定的是目录.env.production/，但实际是文件.env.production

修改后的Dockerfile（如果项目根目录存在.env.production文件）：

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
# 复制env文件到工作目录
COPY .env.production ./
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]

如果项目中没有.env.production文件，直接删除那行COPY命令，改用构建传参的方式注入变量。

2. 解决Cloud Run环境变量无效问题 #

Vite的import.meta.env.VITE_*变量是构建阶段静态注入的，Cloud Run控制台设置的是运行时环境变量，对已构建完成的静态文件完全无效。必须在Docker构建过程中传入变量，才能让Vite打包时将其注入代码。

方法一：Cloud Build构建传参 #

编写cloudbuild.yaml配置文件，将变量作为构建参数传入：

steps:
- name: 'gcr.io/cloud-builders/docker'
  args: [
    'build',
    '--build-arg', 'VITE_STORYBLOK_ACCESS_TOKEN=$_STORYBLOK_TOKEN',
    '-t', 'gcr.io/$PROJECT_ID/your-app-image',
    '.'
  ]
# 可在Cloud Build触发器中动态设置该替换变量，避免明文暴露
substitutions:
  _STORYBLOK_TOKEN: "your-storyblok-access-token"
images:
- 'gcr.io/$PROJECT_ID/your-app-image'

同时修改Dockerfile，添加ARG声明接收构建参数并转为环境变量：

# build stage
FROM node:lts-alpine as build-stage
# 声明构建参数
ARG VITE_STORYBLOK_ACCESS_TOKEN
# 将参数转为环境变量，Vite会自动读取带VITE_前缀的变量
ENV VITE_STORYBLOK_ACCESS_TOKEN=$VITE_STORYBLOK_ACCESS_TOKEN
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]

方法二：Secret Manager存储敏感变量（推荐） #

如果变量是敏感信息（如访问令牌），禁止明文写入配置，使用Google Cloud Secret Manager：

1. 将VITE_STORYBLOK_ACCESS_TOKEN存入Secret Manager（命名为storyblok-access-token）
2. 修改cloudbuild.yaml，构建前拉取密钥并传入：

steps:
- name: 'gcr.io/cloud-builders/gcloud'
  args: ['secrets', 'versions', 'access', 'latest', '--secret=storyblok-access-token', '--format="value(payload.data)"', '|', 'base64', '-d', '>', 'secret.txt']
  id: 'fetch-secret'
- name: 'gcr.io/cloud-builders/docker'
  args: [
    'build',
    '--build-arg', 'VITE_STORYBLOK_ACCESS_TOKEN=$(cat secret.txt)',
    '-t', 'gcr.io/$PROJECT_ID/your-app-image',
    '.'
  ]
images:
- 'gcr.io/$PROJECT_ID/your-app-image'

3. 验证变量注入 #

构建完成后，可通过以下方式验证：

• 本地运行镜像，查看浏览器控制台中import.meta.env.VITE_STORYBLOK_ACCESS_TOKEN的值
• 检查Cloud Run部署后的静态JS文件，搜索变量名确认已被注入

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