部署在Azure的Nuxt 3应用忽略nuxt.config.ts环境变量问题

核心原因 #

Nuxt 3的nuxt.config.ts是在构建阶段解析执行的，如果你在Azure上的环境变量是部署后才注入的，或者变量不符合Nuxt的加载规则，构建时就无法读取到这些值，导致生产环境配置失效。

可行解决方向 #

1. 给环境变量添加Nuxt前缀 #

Nuxt默认只会自动加载以NUXT_开头的环境变量，若你使用的REDIS_PORT、REDIS_HOST、REDIS_PASS无前缀，需修改为NUXT_REDIS_PORT、NUXT_REDIS_HOST、NUXT_REDIS_PASS，再在nuxt.config.ts中通过process.env读取：

nitro: {
    storage: {
      redis: {
        driver: 'redis',
        port: process.env.NUXT_REDIS_PORT,
        host: process.env.NUXT_REDIS_HOST,
        username: '',
        password: process.env.NUXT_REDIS_PASS,
        db: 0
      }
    }
  },

同时在Azure的应用设置中添加对应带前缀的环境变量。

2. 确保Azure环境变量在构建阶段可用 #

若Azure采用先构建再部署的方式（如App Service本地Git部署、GitHub Actions），需保证构建过程能访问到环境变量：

• App Service：在配置中心的「应用设置」添加变量后，勾选「部署槽位设置」（若用部署槽），确保构建脚本可读取变量。
• GitHub Actions部署：在GitHub Secrets中添加变量，再在部署Workflow中注入为环境变量。

3. 改用Runtime Config动态配置 #

若Redis配置需在运行时读取环境变量（而非构建时），可将配置移至runtimeConfig，再通过Nitro插件动态设置storage：

1. 在nuxt.config.ts中添加runtimeConfig：

export default defineNuxtConfig({
  runtimeConfig: {
    redis: {
      port: process.env.REDIS_PORT,
      host: process.env.REDIS_HOST,
      password: process.env.REDIS_PASS
    }
  }
})

2. 创建Nitro插件（如server/plugins/redis-storage.ts）：

export default defineNitroPlugin((nitroApp) => {
  const config = useRuntimeConfig()
  nitroApp.storage.mount('redis', {
    driver: 'redis',
    port: config.redis.port,
    host: config.redis.host,
    username: '',
    password: config.redis.password,
    db: 0
  })
})

这种方式会在应用启动时（运行时）读取环境变量，部署后修改变量无需重新构建即可生效。

4. 检查Azure部署的构建命令 #

确保Azure上的构建命令为标准Nuxt构建命令（如npm run build），而非直接部署静态文件。若采用静态站点部署（如Static Web Apps），Nitro的服务器端配置无法生效，需改用App Service等支持Node.js运行时的部署方式。

是否为已知问题 #

这不属于Nuxt 3的Bug，官方文档明确说明nuxt.config.ts的配置是构建时求值的，若环境变量在构建时不可用，就会出现此类情况，只需遵循Nuxt的环境变量加载规则和部署流程即可解决。

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