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 获取到运行时配置。
配置好后,重新运行一下程序,我们可以在终端控制台以及浏览器的控制台看到打印的配置项。
终端中显示的是服务端执行时候打印的配置,可以看到都成功的获取到了值。
image.png
浏览器控制台上打印的是在客户端上执行的结果,可以看到,apiSecret的值为undefined,确实是没有获取到。
image.png

序列化

运行时配置在传递给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 环境变量覆盖
    }
  },
})

添加完环境变量后,需要重新运行下项目才能生效,重新运行后,再看打印的值。可以发现环境变量获取成功了。
image.png

如何区分开发环境和线上环境

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文件,在该文件内覆盖其中一个变量
image.png
然后,进入package.json文件,修改dev命令如下:

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

修改后,我们重新运行下程序, 可以看到在.env.local中设置的环境变量在开发模式下已经生效。
image.png
接下来我们可以再执行npm run generate命令看看打包时环境变量的读取情况, 可以看到依然是.env中的值,符合我们的预期
image.png

结语

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

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

联系作者:imwty2023(微信),iwhitney@163.com(邮箱)


imwty
1.1k 声望96 粉丝

Enjoy creating rather than coding!