Docker部署Nuxt3时生产环境环境变量为空问题

问题根源 #

你在Dockerfile中先执行npm run build构建项目，而env_file是在容器运行阶段才注入环境变量的——这就导致构建时NUXT_BACK_HOST_URL根本不存在，Nuxt会把runtimeConfig.public.uris.backHost硬编码为空字符串到客户端包中，后续运行时即使注入环境变量也无法覆盖这个已编译的值。

而Paas平台（如render.com）是先配置环境变量再执行构建，本地开发时Vite会实时读取.env文件，所以这两种场景下变量都能正常生效。

解决方案 #

方案1：构建阶段注入环境变量（适合固定变量场景）

修改Dockerfile，确保在npm run build前就能获取到环境变量：

FROM node:18-alpine

WORKDIR /app

COPY package*.json ./
RUN npm install

# 方式1：直接复制.env文件到构建环境
COPY .env .env
# 方式2：通过构建参数传递（更灵活，适合CI/CD）
# ARG NUXT_BACK_HOST_URL
# ENV NUXT_BACK_HOST_URL=$NUXT_BACK_HOST_URL

RUN npm run build

COPY . .

EXPOSE 3000
CMD ["npm", "run", "start"]

如果用构建参数方式，构建镜像时执行：

docker build --build-arg NUXT_BACK_HOST_URL=https://example.com -t nuxt-app .

方案2：运行时动态传递变量（适合需要动态调整的场景）

如果需要在容器运行时才指定环境变量，可通过服务器端变量中转：

1. 修改nuxt.config.ts，把变量放到服务器端的runtimeConfig（不暴露给客户端的部分）：

export default defineNuxtConfig({
    runtimeConfig: {
      // 服务器端专属变量，不会被编译到客户端
      backHost: process.env.NUXT_BACK_HOST_URL,
      public: {
        uris: {
          backHost: '' // 留空，运行时从服务器端获取
        }
      }
    }
})

2. 创建插件plugins/runtime-config.ts，在应用启动时把服务器端变量同步到客户端：

export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig()
  config.public.uris.backHost = config.backHost
})

这样容器运行时注入的环境变量会被服务器端读取，再同步给客户端。

方案3：使用NUXT_PUBLIC_前缀变量（Nuxt3.3+支持）

把环境变量前缀改成NUXT_PUBLIC_，Nuxt3会支持运行时替换客户端的变量：

1. 修改.env文件：

NUXT_PUBLIC_BACK_HOST_URL=https://example.com

2. 更新nuxt.config.ts：

export default defineNuxtConfig({
    runtimeConfig: {
      public: {
        uris: {
          backHost: process.env.NUXT_PUBLIC_BACK_HOST_URL
        }
      }
    }
})

这种方式下，即使构建时没有变量，Nuxt也会在运行时自动替换客户端包中的占位符，无需额外修改Dockerfile。

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