运行时配置 Runtime Config

Nuxt 提供了一个 API，用于在应用程序和 API 路由中定义运行时配置。

公开运行时配置 Exposing runtime config

为了向应用程序的其他部分公开配置和环境变量，您需要在 nuxt.config 文件中定义运行时配置，可以使用 privateRuntimeConfig 或 publicRuntimeConfig 选项(根据您是否希望在应用程序的客户端部分可以访问它来选择使用)。

示例：

export default defineNuxtConfig({
    publicRuntimeConfig: {
        API_BASE: '/api'
    },
    privateRuntimeConfig: {
        API_SECRET: '123' // 仅服务端可用，会覆盖publicRuntimeConfig的配置
    }
})

在将 API_BASE 添加到 publicRuntimeConfig 时，Nuxt 会将其添加到页面的有效负载中。这样我们就可以在服务器和浏览器中访问 API_BASE。

环境变量 Environment Variables

提供配置的最常用方法是使用 环境变量 。 Nuxt CLI 内置 dotenv 支持。

除了一些进程(process)环境变量之外，如果在项目的根目录中有一个 .env 文件，它将自动加载到 process.env 中，并且可以在 nuxt.config 文件和模块中访问。

示例：

BASE_URL=https://nuxtjs.org
API_SECRET=api_secret_token

export default defineNuxtConfig({
    publicRuntimeConfig: {
        BASE_URL: process.env.BASE_URL
    },
    privateRuntimeConfig: {
        API_SECRET: process.env.API_SECRET
    }
})

💡 提示：

虽然没有必要，但是通过使用相同的运行时配置名称作为 env 变量，您可以在生产环境中使用平台环境变量轻松地覆盖它们。

访问运行时配置 Accessing runtime config

Vue 实例中

在 Nuxt 应用程序的 Vue 实例中，需要调用 useRuntimeConfig() 来访问运行时配置。

注意：客户端和服务器端的行为是不同的

• 在客户端，只有 publicRuntimeConfig 可用，并且该对象是可修改的响应式对象。
• 在服务器端，publicRuntimeConfig 和 privateRuntimeConfig 被合并并且对象是只读的以避免上下文共享。

<template>
    <div>
        <div>Token: {{ config.API_AUTH_TOKEN }}</div>
    </div>
</template>

<script setup>
const config = useRuntimeConfig()
</script>

安全注意：

如果API_AUTH_TOKEN 是私有配置，请不要使用上面的示例。 即使您使用privateRuntimeConfig，您仍然必须小心不要将此类配置暴露给有效负载或html！

注意：

👉 useRuntimeConfig 仅在 setup函数 或 生命周期钩子 内有效

API 路由 API routes

在 API 路由中，您可以通过直接从虚拟 #config 导入来访问运行时配置。

import config from '#config'

export default async () => {
    const result = await $fetch('https://my.api.com/test', {
        headers: {
            Authorization: `Bearer ${config.API_AUTH_TOKEN}`
        }
    })
    return result
}

输入运行时配置 Typing runtime config

目前可以手动输入运行时配置文件。

declare module '@nuxt/schema' {
    interface PublicRuntimeConfig {
        testConfig: string
    }
    interface PrivateRuntimeConfig {
        token: string
    }
}
// 确保在扩充类型时 import/export 某些比较重要的内容
export {}