Kubernetes集群部署Vite+React应用时，如何不依赖.env文件正确调用环境变量？

兄弟我太懂你这种抓狂的感觉了！之前我把Vite项目部署到K8s的时候也踩过一模一样的坑——明明Pod里的环境变量查出来是对的，但前端代码里import.meta.env.VITE_SERVER_ADDRESS就是返回undefined，本地用.env文件好好的，一到集群就歇菜😤。

先给你捋清楚核心问题：Vite默认是构建阶段把VITE_前缀的环境变量注入到静态代码里的。如果你是先在本地/CI里构建好镜像，再传到K8s里用ConfigMap塞环境变量，这时候代码早就编译完了，静态文件里根本没有这个变量的位置，自然读不到！

下面给你几个适配K8s+Helm场景的解决办法，你可以根据需求选：

方法一：构建时通过Helm动态注入环境变量（最适合你的场景） #

既然你用Helm来管理不同环境的配置，那直接在构建镜像的时候把环境变量传进去就行，完美契合Vite的构建时注入机制：

1. 修改Dockerfile，用ARG接收构建参数，再转成ENV让Vite能读到：

   # 基础镜像省略...
   ARG VITE_SERVER_ADDRESS
   ENV VITE_SERVER_ADDRESS=$VITE_SERVER_ADDRESS
   # 安装依赖
   COPY package*.json ./
   RUN npm install
   # 复制代码并构建
   COPY . .
   RUN npm run build
   # 部署静态文件省略...
   

2. 用Helm传递构建参数：在你的Helm Chart里，把VITE_SERVER_ADDRESS作为values配置项，构建镜像的时候传入这个参数（比如用Kaniko、BuildKit或者CI工具配合）。这样不同环境部署时，Helm会自动把对应环境的地址注入到构建后的静态代码里，代码里import.meta.env.VITE_SERVER_ADDRESS就能正常读到值了。

方法二：运行时替换静态文件里的占位符（适合同镜像多环境部署） #

如果想让同一个镜像能跑在不同环境，不用每次都重新构建，那可以用容器启动脚本替换静态文件里的占位符：

1. 代码里先写占位符：把原来的import.meta.env.VITE_SERVER_ADDRESS改成固定占位符，比如：

   const serverAddress: string = '__VITE_SERVER_ADDRESS__';
   const url: string = `http://${serverAddress}:8000/run-main`;
   

2. 写一个启动脚本（比如start.sh）：

   #!/bin/sh
   # 替换静态JS文件里的占位符
   sed -i "s/__VITE_SERVER_ADDRESS__/$VITE_SERVER_ADDRESS/g" /usr/share/nginx/html/assets/*.js
   # 启动Web服务（这里用nginx举例）
   nginx -g 'daemon off;'
   

3. 修改Dockerfile，把脚本COPY进去并设置为启动命令：

   # 构建阶段省略...
   COPY start.sh /usr/local/bin/
   RUN chmod +x /usr/local/bin/start.sh
   CMD ["start.sh"]
   

   这样容器启动时，会自动把K8s ConfigMap注入的环境变量替换到静态文件里，代码就能拿到正确的值了。

必做的检查项！ #

最后再帮你排查几个容易踩的小坑：

• 检查变量名拼写：你问题里写的是VITE_SERVER_ADDRESSS（多了一个S），但代码里用的是VITE_SERVER_ADDRESS，一定要确保ConfigMap、Pod环境变量、代码里的变量名完全一致！
• 确认Pod里的环境变量确实存在：用kubectl exec <你的Pod名称> -- printenv | grep VITE_SERVER_ADDRESS检查，确保值是对的。
• 本地测试时，要对应生产环境的构建命令：比如本地用npm run build而不是npm run dev，因为开发环境和生产环境的环境变量注入逻辑可能有差异。

内容来源于stack exchange