Vue.js 3 + Nuxt.js 3应用中环境变量无法读取的问题求助

嗨，我来帮你梳理下问题根源和对应的解决方案：

核心问题：构建阶段没拿到环境变量 #

你现在的问题出在：Nuxt的npm run generate是在Docker的build-stage执行的，但你在docker-compose里配置的environment是容器运行时的环境变量，构建阶段根本读不到这些值。Dockerfile里虽然定义了ARG，但你没在docker-compose的构建配置里把这些变量传递给构建阶段，所以构建时process.env里没有自定义变量，自然只能用nuxt.config.ts里的默认值。

解决方案：在docker-compose中传递构建参数 #

你需要修改docker-compose文件，把环境变量作为构建参数传递给Dockerfile，这样在build-stage执行npm run generate时就能读取到这些变量了。

1. 修改docker-compose-staging.yml的build部分：

version: '3'
services:
  frontend:
    container_name: frontend
    build:
      context: .
      dockerfile: Dockerfile
      args:
        NUXT_ENV_SETUP: "staging"
        NUXT_ENV_N_API: "staging-url/api"
        NUXT_ENV_VR_API: "staging-v-url/api"
    ports:
      - "3005:80"
    # 注：生产构建时挂载本地目录到容器没必要，反而可能覆盖容器内文件，建议移除以下volumes配置
    # volumes:
    #   - /app/node_modules
    #   - .:/app
    # 运行时环境变量可删除，因为构建阶段已拿到所需值
    # environment:
    #   NUXT_ENV_SETUP: "staging"
    #   NUXT_ENV_N_API: "staging-url/api"
    #   NUXT_ENV_VR_API: "staging-v-url/api"

2. 同样修改docker-compose.yml的build部分：

version: '3'
services:
  frontend:
    container_name: frontend
    build:
      context: .
      dockerfile: Dockerfile
      args:
        NUXT_ENV_SETUP: "production"
        NUXT_ENV_N_API: "production-url/api"
        NUXT_ENV_VR_API: "production-v-url/api"
    ports:
      - "3005:80"
    # 同样建议移除不必要的volumes配置
    # volumes:
    #   - /app/node_modules
    #   - .:/app

额外说明 #

• 为什么要这么做？因为Nuxt执行generate时会把环境变量打包到静态资源里，这个过程发生在Docker构建阶段，而非容器运行阶段。必须让构建阶段能访问到这些变量，而不是只在运行时配置。
• 你原来的docker-compose里的volumes挂载本地目录到容器，在开发环境可能有用，但生产构建完全不需要，反而可能导致容器内文件被本地文件覆盖，建议移除。
• 你的nuxt.config.ts写法没问题：Nuxt3的runtimeConfig.public确实会读取process.env里前缀为NUXT_ENV_的变量。

修改完成后，重新执行docker-compose -f docker-compose-staging.yml build && docker-compose -f docker-compose-staging.yml up，再查看日志应该就能拿到正确的环境变量值了。

备注：内容来源于stack exchange，提问作者kuvasney