Docker部署的Vite+Vue.js项目获取K8s环境变量失败求助

你的核心问题在于：Vite的VITE_*环境变量默认是构建时注入的，但你当前的Docker构建流程没有传入任何环境变量，导致最终生成的静态文件里import.meta.env.VITE_APP_URL是空值；而Kubernetes给容器设置的环境变量，前端静态代码无法直接读取（因为前端运行在浏览器中，而非容器进程内）。要实现「同一个镜像适配多环境变量」，必须改成运行时注入环境变量的方式。

步骤1：修改前端代码，改用运行时配置 #

放弃直接依赖import.meta.env，改为从全局配置文件读取变量：

1. 在项目的public目录下创建config.js模板文件：

window.APP_CONFIG = {
  VITE_APP_URL: '${VITE_APP_URL}'
};

2. 在index.html的<head>中引入该文件：

<script src="/config.js"></script>

3. 前端代码中替换原来的import.meta.env.VITE_APP_URL为：

// 示例：在组件中使用
console.log(window.APP_CONFIG.VITE_APP_URL);

步骤2：修改Dockerfile，添加运行时变量替换逻辑 #

调整镜像构建流程，让容器启动时动态替换config.js中的占位符：

FROM node:20.10 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
# 构建时不需要传入环境变量，留到运行时处理
RUN npm run build

# 生产阶段
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY ./nginx.conf /etc/nginx/nginx.conf
# 复制config.js模板到静态文件目录
COPY ./public/config.js /usr/share/nginx/html/config.js

# 创建启动脚本：启动前替换环境变量占位符
RUN echo '#!/bin/sh' > /entrypoint.sh && \
    echo 'sed -i "s/\${VITE_APP_URL}/$VITE_APP_URL/g" /usr/share/nginx/html/config.js' >> /entrypoint.sh && \
    echo 'nginx -g "daemon off;"' >> /entrypoint.sh && \
    chmod +x /entrypoint.sh

EXPOSE 80
# 使用自定义启动脚本替代默认CMD
CMD ["/entrypoint.sh"]

步骤3：Kubernetes部署配置 #

在各环境的Deployment中设置对应的环境变量即可：

Stage环境示例 #

apiVersion: apps/v1
kind: Deployment
metadata:
  name: vue-app-stage
spec:
  replicas: 1
  selector:
    matchLabels:
      app: vue-app
  template:
    metadata:
      labels:
        app: vue-app
    spec:
      containers:
      - name: vue-app
        image: your-image-tag:latest
        ports:
        - containerPort: 80
        env:
        - name: VITE_APP_URL
          value: "test1"

QA/Prod环境 #

仅需将env.value分别改为test2和test3即可，复用同一个镜像。

如果需要更规范的配置管理，也可以用Kubernetes ConfigMap存储环境变量，再在Deployment中引用：

# 先创建ConfigMap
apiVersion: v1
kind: ConfigMap
metadata:
  name: vue-app-config-qa
data:
  VITE_APP_URL: "test2"

# Deployment中引用
env:
- name: VITE_APP_URL
  valueFrom:
    configMapKeyRef:
      name: vue-app-config-qa
      key: VITE_APP_URL

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