Nuxt 3 应用程序部署到 Azure。 nuxt.config.ts 的硝基部分中忽略环境变量

Question

我发现部署到 Azure 的 Nuxt 3 应用程序忽略了

nuxt.config.ts

中的环境变量。

这是我本地的：

nitro: {
    storage: {
      redis: {
        driver: 'redis',
        port: REDIS_PORT,
        host: REDIS_HOST,
        username: '',
        password: REDIS_PASS,
        db: 0
      }
    }
  },

但是如果我希望它在生产机器上工作，我必须删除 3 个环境变量并对它们进行硬编码。这完全不方便，因为我有一个修改过的

nuxt.config.ts

文件，我永远无法推送。当切换分支时，我必须复制该部分，丢弃文件，切换到新分支，然后粘贴该部分。

我在文档中看到了一个示例，但我想知道被忽略的环境变量是否是一个已知问题，或者我是否遗漏了一些非常明显的东西。

提前感谢任何可能提供帮助的人:)

Answer 1

我创建了一个示例 nuxt 应用程序，它将环境变量打印为输出。

• 在项目根目录中，创建一个

  .env

  文件并添加

REDIS_PORT=<port>
REDIS_HOST=<Hostname>
REDIS_PASS=<password>

• 我参考了这个doc并将

  dotenv

  添加到

  nuxt.config.ts 

  ，它将从

  .env

加载环境变量

import  'dotenv/config'
require('dotenv').config()

• 我使用

  process.env

  来访问

  nuxt.config.ts

  文件中的环境变量。
• 这确保从

  .env

  检索环境变量，而不是硬编码。

完成nuxt.config.ts：

import { defineNuxtConfig } from  'nuxt/config'
import  'dotenv/config'
require('dotenv').config()
export  default  defineNuxtConfig({
nitro: {
storage: {
redis: {
driver:  'redis',
port:  process.env.REDIS_PORT,
host:  process.env.REDIS_HOST,
username:  '',
password:  process.env.REDIS_PASS,
db:  0
}
}
},
runtimeConfig: {
public: {
redisPort:  process.env.REDIS_PORT,
redisHost:  process.env.REDIS_HOST,
redisPass:  process.env.REDIS_PASS,
}
}
})

pages/index.vue：

<template>
  <div>
    <h1>Environment Variables</h1>
    <ul>
      <li>REDIS_PORT: {{ redisPort }}</li>
      <li>REDIS_HOST: {{ redisHost }}</li>
      <li>REDIS_PASS: {{ redisPass }}</li>
    </ul>
  </div>
</template>
<script setup>
import { useRuntimeConfig } from '#imports'
const config = useRuntimeConfig()
const redisPort = config.public.redisPort
const redisHost = config.public.redisHost
const redisPass = config.public.redisPass
</script>

这里，环境变量是Vue组件通过

useRuntimeConfig

显示的。

这样 Nuxt3 应用程序可以在开发和生产中使用和加载环境变量。

部署后输出：