Nuxt3中的runtimeConfig与app.config

参考：vue.js - Nuxt3实战系列之配置管理 - 开发小记 - SegmentFault 思否需要留意的一点是，默认定义的配置选项都只能在服务端流程中可访问，如果需要在客户端也能使用，需要将配置项定义在public选项内。配置项定义好后，我们可以...https://segmentfault.com/a/1190000043469250 

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

runtimeConfig 运行时配置

为了将配置和环境变量暴露给应用程序，需要在nuxt.config.ts文件中使用runtimeConfig选项定义运行时配置。 配置项定义好后，我们可以使用useRuntimeConfig()去获取定义的配置项的值

 浏览器控制台上打印的是在客户端上执行的结果，可以看到，apiSecret的值为undefined，确实是没有获取到。服务端（dos窗口）中是获取到了apiSecret的值123的

export default defineNuxtConfig({
  runtimeConfig: {
    // 只在服务端可以访问的配置项
    apiSecret: '123',
    // 可以暴露给客户端使用的配置项
    public: {
      apiBase: '/api'
    }
  }
})

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

app.config.ts

在项目的根目录下新建app.config.ts文件，里头的配置主要是在项目的构建和编译阶段中会使用到。与运行时的配置相反，这里的配置不能被环境变量覆盖。

配置文件中最简单的内容就是导出一个defineAppConfig方法

 

// app.config.ts
export default defineAppConfig({
  title: 'Hello Nuxt',
  theme: {
    dark: true,
    colors: {
      primary: '#ff0000'
    }
  }
})

runtimeConfig与app.config

这两个的作用都是暴露变量给项目中使用。那在实际项目开发过程中到底使用哪个呢。

• runtimeConfig:项目中需要使用指定的私有数据时
• app.config:可以放一些需要在构建时使用的公共Token, 例如主题变量，标题等不敏感的数据。