choukin

V1

2022/07/24阅读:16主题:默认主题

[Nuxt 3] (十)运行时配置

只有用心才能看见事物的本质。真正重要的东西是肉眼看不见的

运行时配置

Nuxt 提供了运行时配置API,用于在应用程序和服务器路由中使用,还可以通过环境变量来修改这些配置。

设置运行时配置

把配置和环境变了公开给应用程序的其他部分,你需要使用nuxt.confg 文件中使用 runtimeConfig 配置项来定义运行时的配置

例子:

export default defineNuxtConfig({
  runtimeConfig: {
    // 设置一个只能在服务器端使用的私有密钥
    apiSecret: '123',
    // public  对象里设置的key 在 客户端也能使用
    public: {
      apiBase: '/api'
    }
  }
})

runtimeConfig.public 中设置了 apiBase, Nuxt 会把这个配置添加到每个页面的有效负载中,我们可以同时在服务器和浏览器端使用apiBase.

const runtimeConfig = useRuntimeConfig()

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

环境变量

通常会使用环境变量 来设置配置项。 .

::alert{type=info} Nuxt CLI 内置了对 dotenv的支持,

除了项目进程中的环境变了,如果你在项目根目录设置了.env 文件,文件中的配置项可以自动合并到process.env 中,你可以通过它在nuxt.confg 以及其他模块中使用。

但是,项目构建后 想要在服务端修改环境变了,这个时候.env 不会起作用。 例如:你可以使用终端命令来设置参数,DATABASE_HOST=mydatabaseconnectionstring node .output/server/index.mjs ::

运行时的配置会在运行时自动替换成环境变量。为此,你必须在 nuxt.config 中设置默认值。

例子:

NUXT_API_SECRET=api_secret_token
NUXT_PUBLIC_API_BASE=https://nuxtjs.org
export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: ''// can be overridden by NUXT_API_SECRET environment variable
    public: {
      apiBase: ''// can be overridden by NUXT_PUBLIC_API_BASE environment variable
    }
  },
})

访问运行时配置

Vue 应用

在Nuxt 项目的Vue部分,你需要调用useRuntimeConfig() 来访问运行时的配置。

注意: 客户端和服务器端的使用方式不一样:

  • 在客户端,只有 public 中的的key是可以使用的,并且这个对象是可写和响应式的。
  • 在服务器端,所有的运行时配置都是可以访问的,但是都是只读以避免上下文共享。
<template>
  <div>
    <div>Check developer console!</div>
  </div>
</template>

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

🛑 安全提示: 不要把运行时的配置渲染到页面或放到 useState 中使用。.

::alert{icon=👉} useRuntimeConfig 只能在 setup生命周期钩子 中使用. ::

插件

如果要在自定义插件中使用环境变量,可以在defineNuxtPlugin 函数中使用 useRuntimeConfig·

示例:

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig()
  console.log('API base URL:', config.public.apiBase)
});

服务端路由

你也可以在服务器路由中通过useRuntimeConfig 来访问运行时配置。

export default async () => {
  const result = await $fetch('https://my.api.com/test', {
    headers: {
      Authorization: `Bearer ${useRuntimeConfig().apiSecret}`
    }
  })
  return result
}

手动输入运行时配置

Nuxt 会通过unjs/untyped尝试为运行时配置自动生成Typescript接口.

也可手动设置属性运行时配置:

declare module '@nuxt/schema' {
  interface RuntimeConfig {
    apiSecret: string
    public: {
      apiBase: string
    }
  }
}
// It is always important to ensure you import/export something when augmenting a type
export {}

分类:

前端

标签:

Vue.js

作者介绍

choukin
V1