Question

如果您希望在 Nuxt 3 应用程序中引用环境变量，则需要使用运行时配置。

在组件中引用这些变量时，您必须在设置方法（或 Nuxt 插件）中使用 useRuntimeConfig 可组合项。

在应用程序的 server/ 部分，您可以使用 useRuntimeConfig 而无需任何导入。

阅读有关运行时配置的更多信息。

迁移步骤nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    // 仅在服务器上可用的私有配置
    apiSecret: '123',
    // public 中的配置也会暴露给客户端
    public: {
      apiBase: '/api'
    }
  },
})

pages/index.vue

<script setup>
  const config = useRuntimeConfig()

  // 而不是 process.env 你现在将访问 config.public.apiBase
  console.log(config.public.apiBase)
</script>

server/api/hello.ts

const config = useRuntimeConfig()

export default (req, res) => {
  // 在服务器中，除了 config.public 之外，您现在还可以访问 config.apiSecret
  console.log(config.apiSecret)
  console.log(config.public.apiBase)
}

.env

# 运行时配置值在运行时自动替换为匹配的环境变量
NUXT_API_SECRET=api_secret_token
NUXT_PUBLIC_API_BASE=https://nuxtjs.org