Docker构建Vue项目时环境变量不生效怎么办？

美含 Dev 提问于 2026-03-20 20:39:19 阅读 7

工具

我在CI/CD流水线里用Docker构建Vue项目，本地开发时.env文件里的VUE_APP_API_BASE能正常读取，但打包到Docker镜像后就变成undefined了，试过把.env复制进容器也不行。

这是我的组件里用到环境变量的地方：

<script>
export default {
  mounted() {
    console.log('API Base:', process.env.VUE_APP_API_BASE);
    // 期望输出类似 'https://api.prod.example.com'
    // 但Docker构建后输出 undefined
  }
}
</script>

CI/CD集成 Docker

我来解答赞 2 收藏

反馈

1 条解答

博主甜茜 Lv1

遇到这种情况，通常是因为环境变量在构建和运行阶段没有正确传递。Vue CLI 在构建时会将 .env 文件中的变量注入到应用中，但如果这些变量在 Docker 构建过程中没有被正确设置，就会导致 undefined 的情况。

首先检查 Dockerfile 和 CI/CD 配置，确保在构建和运行容器时设置了正确的环境变量。可以在 Dockerfile 中使用 ARG 来定义构建时变量，或者在 docker run 命令中使用 -e 参数来设置运行时环境变量。

例如，修改 Dockerfile 添加一个 ARG 来接收 API_BASE_URL：

class="pure-highlightjs line-numbers"><code class="language-dockerfile">FROM node:14 as build-stage



WORKDIR /app



COPY package*.json ./



RUN npm install



ARG API_BASE_URL



COPY . .



ENV VUE_APP_API_BASE $API_BASE_URL



RUN npm run build



FROM nginx:stable-alpine as production-stage



COPY --from=build-stage /app/dist /usr/share/nginx/html



EXPOSE 80



CMD ["nginx", "-g", "daemon off;"]

然后在 CI/CD 脚本或 Docker Compose 文件中传递这个参数：

docker build --build-arg API_BASE_URL=https://api.prod.example.com -t my-vue-app .

docker run -p 8080:80 my-vue-app

这样可以确保在构建 Vue 应用时，VUE_APP_API_BASE 已经被设置并注入到了应用中。如果还是有问题，可以检查一下构建和运行的日志，看看是否有相关的错误信息。有时候环境变量的名称大小写敏感，确保名称完全匹配。

2026-03-20 21:01