Question

Nuxt 提供了一个运行时配置 API 来公开应用程序和服务器路由中的配置，并能够通过设置环境变量在运行时更新它。

公开运行时配置

要将配置和环境变量暴露给应用程序的其余部分，您需要在 nuxt.config 文件中定义运行时配置，使用 runtimeConfig 选项.

示例:

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    // 仅在服务器端可用的私钥
    apiSecret: '123',
    // 公共密钥，也将暴露给客户端
    public: {
      apiBase: '/api'
    }
  }
})

将 apiBase 添加到 runtimeConfig.public 时，Nuxt 将其添加到每个页面负载中。 我们可以在服务器和浏览器中普遍访问 apiBase 。

js

const runtimeConfig = useRuntimeConfig()

console.log(runtimeConfig.apiSecret)
console.log(runtimeConfig.public.apiBase)

使用 Options API 时，公共运行时配置可通过 this.$config.public 获得。

序列化

Vue 应用程序

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

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

• 在客户端，只有 public 中的键可用，并且该对象既可写又可响应。 整个运行时配置在服务器端可用，但它是只读的以避免上下文共享。

vue

<template>
  <div>
    <div>检查开发者控制台！</div>
  </div>
</template>

<script setup>
const config = useRuntimeConfig()
console.log('Runtime config:', config)
if (process.server) {
  console.log('API secret:', config.apiSecret)
}
</script>