Nuxt 3在Docker Compose中无法读取runtimeConfig环境变量

问题根源 #

你的核心问题是构建阶段与运行时环境变量的固化冲突：

• 当前nuxt.config.ts中直接将process.env.NUXT_PUBLIC_API_URL赋值给runtimeConfig.public.baseURL，Nuxt 3会在yarn build时把这个变量值静态嵌入到构建产物里。
• 你是在容器运行时通过Docker Compose传递环境变量，但此时构建产物已经固化了undefined（因为构建阶段没有传入该变量），运行时的变量无法覆盖这个静态值。

解决方案 #

1. 调整Nuxt配置，支持运行时动态读取 #

修改nuxt.config.ts，无需显式赋值process.env.NUXT_PUBLIC_API_URL——Nuxt会自动将前缀为NUXT_PUBLIC_的环境变量注入到runtimeConfig.public中：

// nuxt.config.ts
export default defineNuxtConfig({
  // 其他配置...
  runtimeConfig: {
    public: {
      baseURL: '' // 留空或设置默认值，比如 'http://localhost:3000/api'
    }
  }
})

在应用代码中，通过useRuntimeConfig()获取变量：

// 页面/组件内使用
const config = useRuntimeConfig()
console.log(config.public.baseURL) // 运行时自动读取NUXT_PUBLIC_API_URL的值

2. 修改Dockerfile，避免构建时固化变量 #

当前Dockerfile在构建阶段执行yarn build，但构建时无NUXT_PUBLIC_API_URL变量，导致产物中该值为undefined。我们只需确保构建后的应用能在运行时读取环境变量：

FROM node:20

RUN mkdir -p /usr/src/nuxt-app
WORKDIR /usr/src/nuxt-app

COPY . .

# 安装依赖（锁定版本保证一致性）
RUN yarn install --frozen-lockfile

# 构建应用（无需传入NUXT_PUBLIC_API_URL，运行时动态读取）
RUN yarn build

# 清理冗余文件，缩小镜像体积
RUN rm -rf node_modules && yarn install --production --frozen-lockfile

EXPOSE 3000

CMD ["yarn", "preview"]

3. 保持Docker Compose配置不变 #

你的docker-compose.yml配置是正确的，运行时传递的NUXT_PUBLIC_API_URL会被Nuxt自动识别并注入：

version: '3.8'

services:
  my-nuxt-app:
    image: h/h
    container_name: my-nuxt-app
    ports:
      - "3000:3000"
    environment:
      - NUXT_PUBLIC_API_URL=https://api.example.com

验证步骤 #

1. 重新构建镜像：docker-compose build
2. 启动容器：docker-compose up -d
3. 进入容器验证变量：docker exec my-nuxt-app printenv NUXT_PUBLIC_API_URL，应输出正确的URL
4. 访问应用，检查API调用路径，undefined问题应消失

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