Vite项目在K8s容器部署中无法读取import.meta.env环境变量求解决

开发环境配置 #

• 项目根目录创建.env.development文件，变量名必须以VITE_开头：

  VITE_VAR1=你的开发环境值
  VITE_BASE_URL=http://dev.example.com
  

• 重启开发服务器（vite dev），之后在代码里直接用import.meta.env.VITE_VAR1即可访问，无需额外配置。

生产环境（K8s容器部署）配置 #

结合你提供的Dockerfile和K8s配置，需要注意两个核心关键点：

1. 构建阶段变量注入（静态打包场景） #

你的Dockerfile是先执行npm run build再部署到nginx，Vite默认在构建时会把环境变量静态注入到打包产物中。如果构建过程中没有传入对应变量，打包后的代码里这些变量会返回undefined。

解决方式：修改Dockerfile支持构建参数，构建镜像时传入变量

FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
# 接收构建参数并转为环境变量
ARG VITE_VAR1
ARG VITE_BASE_URL
ENV VITE_VAR1=$VITE_VAR1
ENV VITE_BASE_URL=$VITE_BASE_URL
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

构建镜像时传递参数：

docker build --build-arg VITE_VAR1=生产环境值 --build-arg VITE_BASE_URL=https://prod.example.com -t your-image:tag .

若用Helm管理K8s部署，可在values.yaml中定义构建参数，确保镜像构建时变量被正确传入。

2. 运行时动态注入变量（适用于需动态变更变量的场景） #

如果需要在不重新构建镜像的前提下修改变量，可通过运行时替换的方式实现：

• 在项目public目录创建env-config.js文件：

  window.env = {
    VITE_VAR1: "${VITE_VAR1}",
    VITE_BASE_URL: "${VITE_BASE_URL}"
  };
  

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

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

• 修改代码中的变量读取逻辑，改为从window.env获取：

  const var1 = window.env.VITE_VAR1;
  const baseUrl = window.env.VITE_BASE_URL;
  

• 修改Dockerfile，添加启动脚本替换占位符：

  FROM node:18-alpine as builder
  WORKDIR /app
  COPY package*.json ./
  RUN npm install
  COPY . .
  RUN npm run build
  
  FROM nginx:alpine
  COPY --from=builder /app/dist /usr/share/nginx/html
  COPY entrypoint.sh /entrypoint.sh
  RUN chmod +x /entrypoint.sh
  EXPOSE 80
  ENTRYPOINT ["/entrypoint.sh"]
  

• 创建entrypoint.sh脚本：

  #!/bin/sh
  sed -i "s|\${VITE_VAR1}|${VITE_VAR1}|g" /usr/share/nginx/html/env-config.js
  sed -i "s|\${VITE_BASE_URL}|${VITE_BASE_URL}|g" /usr/share/nginx/html/env-config.js
  nginx -g "daemon off;"
  

• 在K8s的values.yaml中确保环境变量正确传递到容器：

  env:
    - name: VITE_VAR1
      value: "生产环境变量值"
    - name: VITE_BASE_URL
      value: "https://prod.example.com"
  

3. 变量传递验证 #

进入运行中的容器，执行echo $VITE_VAR1和echo $VITE_BASE_URL，确认变量是否存在。若不存在，检查values.yaml的env配置是否正确同步到Deployment的Pod模板中。

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