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

定义运行时配置

为了将配置和环境变量裸露给应用程序，你须要在nuxt.config文件中应用runtimeConfig选项定义运行时配置。

export default defineNuxtConfig({  runtimeConfig: {    // 只在服务端能够拜访的配置项    apiSecret: '123',    // 能够裸露给客户端应用的配置项    public: {      apiBase: '/api'    }  }})

须要注意的一点是，默认定义的配置选项都只能在服务端流程中可拜访，如果须要在客户端也能应用，须要将配置项定义在public选项内。
配置项定义好后，咱们能够应用useRuntimeConfigApi去获取定义的配置项的值。

<script setup>  const runtimeConfig = useRuntimeConfig()  console.log(runtimeConfig.apiSecret)  console.log(runtimeConfig.public.apiBase)</script><template>  <div>    <NuxtWelcome />  </div></template>

应用 Options API 时，咱们也可通过 this.$config.public 获取到运行时配置。
配置好后，从新运行一下程序，咱们能够在终端控制台以及浏览器的控制台看到打印的配置项。
终端中显示的是服务端执行时候打印的配置，能够看到都胜利的获取到了值。

浏览器管制台上打印的是在客户端上执行的后果，能够看到，apiSecret的值为undefined，的确是没有获取到。

序列化

运行时配置在传递给Nitro之前会被序列化。这意味着，任何不能被序列化而后反序列化的货色（如Function、Sets, Maps等），都不应该在nuxt.config中设置。
你能够把这些代码放在Nuxt或Nitro的插件或中间件中，而不是从nuxt.config中把不可序列化的对象或函数传入你的应用程序。

环境变量

提供配置的最常见办法是应用环境变量。
Nuxi CLI 内置反对在开发、构建和生成过程中读取 .env 文件。然而当你运行你构建的服务器时，你的 .env 文件将不会被读取。
运行时配置值在运行时主动替换为匹配的环境变量，但有两个要害要求：

  1. 您须要的变量必须在您的 nuxt.config 中定义。这可确保任意环境变量不会裸露给您的利用程序代码。
  2. 只有特地命名的环境变量能力笼罩运行时配置属性。规定是用NUXT_ 结尾的大写环境变量，应用 _ 来分隔键和大小写变动。

示例如下：

NUXT_API_SECRET=api_secret_tokenNUXT_PUBLIC_API_BASE=https://nuxtjs.org
export default defineNuxtConfig({  runtimeConfig: {    apiSecret: '', // 该项会被 NUXT_API_SECRET 环境变量笼罩    public: {      apiBase: '', // 该项会被 NUXT_PUBLIC_API_BASE 环境变量笼罩    }  },})

增加完环境变量后，须要从新运行下我的项目能力失效，从新运行后，再看打印的值。能够发现环境变量获取胜利了。

如何辨别开发环境和线上环境

Nuxt CLI 在开发模式以及运行 nuxi build 和 nuxi generate 时内置了 dotenv 反对。
除了任何过程环境变量外，如果你在我的项目根目录下有一个.env文件，它将在构建、开发和生成时主动加载，并且在那里设置的任何环境变量都能够在nuxt.config文件和modules中拜访。
如果你想应用不同的文件，例如，应用.env.local或.env.production，你能够在应用nuxi时传递dotenv标记来实现。例如。

npx nuxi dev --dotenv .env.local

如上所述，这只实用于开发模式以及运行nuxi build和nuxi generate时。
那么咱们能够先在根目录下，创立一个.env.local文件，在该文件内笼罩其中一个变量

而后，进入package.json文件，批改dev命令如下：

 "scripts": {    "build": "nuxt build",    "dev": "nuxt dev --dotenv .env.local",  // 指定启动开发模式时读取的环境变量配置文件    "generate": "nuxt generate",    "preview": "nuxt preview",    "postinstall": "nuxt prepare"  },

批改后，咱们从新运行下程序, 能够看到在.env.local中设置的环境变量在开发模式下曾经失效。

接下来咱们能够再执行npm run generate命令看看打包时环境变量的读取状况, 能够看到仍然是.env中的值，合乎咱们的预期

结语

博客原创地址：Nuxt3实战系列之配置管理 | imwty

欢送读者敌人们批评指正。

分割作者：whitney1289（微信），iwhitney@163.com（邮箱）