NuxtJS打包Docker镜像时无法读取Dockerfile配置环境变量问题求解

核心原因说明 #

你遇到的问题是Nuxt环境变量读取规则和Docker构建/运行时变量生命周期不匹配导致的，按以下步骤修改即可： #

1. 修正环境变量读取逻辑 #

Nuxt 2.13+ 提供的runtimeConfig有明确的访问规则，你需要注意：

• privateRuntimeConfig下的变量仅服务端可访问，前端代码直接读取必然返回undefined
• 业务代码不要直接调用process.env.xxx读取配置，必须通过Nuxt提供的$config对象读取：
  • 服务端逻辑/asyncData/fetch方法中：通过context.$config.xxx读取
  • 前端组件中：通过this.$config.xxx读取
    你当前的nuxt.config.js中重复配置了accessId，如果该变量需要前端访问，删除privateRuntimeConfig中的重复配置即可：

// nuxt.config.js 顶部引入dotenv，确保构建/启动时加载系统环境变量
require('dotenv').config()

export default {
  publicRuntimeConfig: {
    accessId: process.env.NUXT_ENV_ACCESS_ID,
    axios: {
      browserBaseURL: process.env.NUXT_ENV_BASE_URL
    }
  },
  privateRuntimeConfig: {
    axios: {
      baseURL: process.env.NUXT_ENV_BASE_URL
    }
  }
}

2. 调整Dockerfile变量声明位置 #

Docker构建阶段声明的环境变量会在构建时被webpack固化到代码中，后续容器启动时修改变量不会生效。如果你需要支持运行时动态修改环境变量，将自定义变量声明移到构建命令之后即可：

FROM node:16-alpine
RUN mkdir -p /usr/src/nuxt-app
WORKDIR /usr/src/nuxt-app
RUN apk update && apk upgrade
RUN apk add git
COPY . /usr/src/nuxt-app/
RUN npm install
# 构建阶段不需要声明自定义变量
RUN npm run build
# 运行时环境变量声明
ENV NUXT_HOST=0.0.0.0
ENV NUXT_PORT=3000
ENV NUXT_ENV_ACCESS_ID="..."
ENV NUXT_ENV_BASE_URL="..."
EXPOSE 3000
# Nuxt2启动命令：CMD [ "npm", "start" ]
# Nuxt3启动命令：CMD [ "node", ".output/server/index.mjs" ]
CMD [ "npm", "start" ]

3. 验证方案 #

容器启动后执行docker exec 容器ID echo $NUXT_ENV_ACCESS_ID，如果返回正常说明变量已经正确注入到容器中，此时Nuxt仍读不到变量只需检查读取方式是否符合要求即可。 #

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