Docker容器中Vite环境变量undefined问题求助

问题根源 #

Vite在构建阶段会将VITE_前缀的环境变量注入到打包后的代码中，你的.env被加入.dockerignore，构建镜像时没有被复制到容器内，导致npm run build执行时Vite无法读取到环境变量，最终打包后的代码里变量为undefined。直接移除.dockerignore里的.env虽然能解决，但会把环境文件打包进镜像，存在敏感信息泄露风险，也无法灵活修改变量（改变量就得重新构建镜像）。

正确方案：构建镜像时传递环境变量 #

通过Docker的构建参数（--build-arg）传递环境变量，让Vite在构建阶段读取到变量，同时避免把.env文件打包进镜像。

1. 修改Dockerfile

在构建阶段添加ARG接收外部传递的变量，再通过ENV让变量在容器环境中生效：

FROM node:18.17.1-alpine
WORKDIR /app
# 定义构建参数，可设置默认值（可选）
ARG VITE_API_BASE_URL
# 将构建参数转为容器环境变量，供Vite构建时读取
ENV VITE_API_BASE_URL=$VITE_API_BASE_URL
COPY package.json .
RUN npm install
COPY . .
RUN npm run build
EXPOSE 8080
CMD ["npm","run","preview"]

2. 构建镜像时传递参数

执行构建命令时，通过--build-arg指定环境变量的值：

docker build --build-arg VITE_API_BASE_URL=https://example.com -t react-vite-app .

3. 运行容器

直接运行镜像即可，变量已经在构建阶段注入到打包后的代码中：

docker run -p 8080:8080 react-vite-app

进阶方案：用Docker Compose管理环境变量 #

如果使用Docker Compose，可以在配置文件中统一管理构建参数，更便于维护：

version: '3.8'
services:
  react-app:
    build:
      context: .
      args:
        VITE_API_BASE_URL: https://example.com
    ports:
      - "8080:8080"

执行以下命令完成构建和运行：

docker-compose up --build

注意事项 #

• Vite只会识别以VITE_开头的环境变量，变量名必须符合该规则才能被注入代码。
• 生产环境部署时，建议用Nginx等静态文件服务器托管打包后的dist目录，npm run preview仅适用于本地预览场景。

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