关于vue.js: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

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

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