Nuxt3实战系列之配置管理

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_token
NUXT_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

欢迎读者朋友们批评指正。

联系作者：imwty2023（微信），iwhitney@163.com（邮箱）