运行时配置 Runtime Config

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

公开运行时配置 Exposing runtime config

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

示例：

```ts [nuxt.config.ts] export default defineNuxtConfig({ publicRuntimeConfig: { API_BASE: ‘/api’ }, privateRuntimeConfig: { API_SECRET: ‘123’ // 仅服务端可用，会覆盖publicRuntimeConfig的配置 } })

  2. 在将 `API_BASE` 添加到 `publicRuntimeConfig` 时，Nuxt 会将其添加到页面的有效负载中。这样我们就可以在服务器和浏览器中访问 `API_BASE`。
  4. ### 环境变量 Environment Variables
  6. 提供配置的最常用方法是使用 [环境变量](https://medium.com/chingu/an-introduction-to-environment-variables-and-how-to-use-them-f602f66d15fa) 。
  7. Nuxt CLI 内置 [dotenv](https://github.com/motdotla/dotenv) 支持。
  9. 除了一些进程(process)环境变量之外，如果在项目的根目录中有一个 `.env` 文件，它将自动加载到 `process.env` 中，并且可以在 `nuxt.config` 文件和模块中访问。
  11. **示例：**
  13. ```sh [.env]
  14. BASE_URL=https://nuxtjs.org
  15. API_SECRET=api_secret_token

```ts [nuxt.config.ts] export default defineNuxtConfig({ publicRuntimeConfig: { BASE_URL: process.env.BASE_URL }, privateRuntimeConfig: { API_SECRET: process.env.API_SECRET } })

  2. :::tip 💡 提示：
  3. 虽然没有必要，但是通过使用相同的运行时配置名称作为 env 变量，您可以在生产环境中使用平台环境变量轻松地覆盖它们。
  4. :::
  6. ## 访问运行时配置 Accessing runtime config
  8. ### Vue 实例中
  10. 在 Nuxt 应用程序的 Vue 实例中，需要调用 `useRuntimeConfig()` 来访问运行时配置。
  12. ::: info 注意：客户端和服务器端的行为是不同的
  14. -   在客户端，只有 `publicRuntimeConfig` 可用，并且该对象是**可修改的响应式对象**。
  15. -   在服务器端，`publicRuntimeConfig` 和 `privateRuntimeConfig` 被合并并且对象是**只读的**以避免上下文共享。
  17. :::
  19. ```vue
  20. <template>
  21.     <div>
  22.         <div>Token: {{ config.API_AUTH_TOKEN }}</div>
  23.     </div>
  24. </template>
  26. <script setup>
  27. const config = useRuntimeConfig()
  28. </script>

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

::: info 注意： 👉 useRuntimeConfig 仅在 setup函数 或 生命周期钩子 内有效 :::

API 路由 API routes

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

  1. import config from '#config'
  3. export default async () => {
  4.     const result = await $fetch('https://my.api.com/test', {
  5.         headers: {
  6.             Authorization: `Bearer ${config.API_AUTH_TOKEN}`
  7.         }
  8.     })
  9.     return result
  10. }

输入运行时配置 Typing runtime config

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

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