本文最初发布于 Mastering Nuxt 博客。
Nuxt3 提供了强大的配置选项，使您能够将应用程序适应不同的用例。
Nuxt3 配置系统的两个关键部分是 runtimeConfig 和 appConfig。本文将解释这两个选项的目的和区别，并向您展示如何使用它们。
了解 runtimeConfig
runtimeConfig 用于在应用程序中公开环境变量和私有令牌，例如 API 密钥或其他敏感信息。这些值可以在 nuxt.config.ts 文件中设置，并且可以使用环境变量进行覆盖。
在 nuxt.config.ts 中设置 runtimeConfig
要在 nuxt.config.ts 文件中设置私钥和公钥，您可以使用以下代码示例：
export default defineNuxtConfig({
runtimeConfig: {
// 仅在服务器端可用的私钥
shoeStoreApiSecret: 'my-secret-key',
// public文件夹中的密钥也会在客户端暴露出来。
public: {
shoeStoreApiBase: '/shoe-api'
}
}
})
访问 runtimeConfig 的值
要在应用程序中访问 runtimeConfig 的值，您可以使用 useRuntimeConfig 可组合对象：
<script setup lang="ts">
const { shoeStoreApiBase } = useRuntimeConfig();
console.log(shoeStoreApiBase); // /shoe-api
</script>
请注意，您不能在客户端上访问私钥：
<script setup lang="ts">
const { shoeStoreApiSecret } = useRuntimeConfig();
console.log(shoeStoreApiSecret); // undefined
</script>
但是您可以在服务器路由中访问所有的值：
export default defineEventHandler(async (event) => {
const { shoreStoreApiSecret } = useRuntimeConfig();
console.log(shoeStoreApiSecret); // my-secret-key
});
使用环境变量
您可以在 .env 文件中设置环境变量，以便在开发和构建(生成)过程中可以访问它们。只需确保使用正确的前缀。
在您的配置文件的 public 字段中的值中添加 NUXT_ 前缀，并且不要忘记添加 PUBLIC 前缀：
NUXT_PUBLIC_SHOE_STORE_API_BASE_URL = "https://api.shoestore.com"
NUXT_SHOE_STORE_API_SECRET = "my-secret-key"
理解 app.config
app.config 用于在构建时公开可以确定的公共变量，例如主题变体、标题或其他非敏感项目配置。这些值在 app.config.ts 文件中设置。
在 app.config.ts 中设置 app.config
要定义 app.config 变量，您需要在项目的根目录下创建 app.config.ts 文件：
// app.config.ts
export default defineAppConfig({
theme: {
primaryColor: '#ababab'
}
})
访问 app.config 的值
要在应用程序中访问 app.config 的值，您可以使用 useAppConfig 可组合对象：
<script setup lang="ts">
const appConfig = useAppConfig()
</script>
键入应用配置
尽管 appConfig 类型可以自动推断，但如果确实需要，您可以使用 TypeScript 手动为 app.config 定义类型。以下示例来自文档：
// index.d.ts
declare module 'nuxt/schema' {
interface AppConfig {
// 这将完全取代现有的推断“theme”属性
theme: {
// 您可能希望键入此值以添加比 Nuxt 可以推断的更多特定类型，
// 比如字符串字面量类型
primaryColor?: 'red' | 'blue'
}
}
}
如果您正在编写一个需要配置的模块，您也可以为您的模块提供一个类型。
runtimeConfig 和 app.config 对比
为了更好地理解 runtimeConfig 和 app.config 之间的差异和相似之处，让我们来看一下这个特征对比表（摘自Nuxt文档）：
| 特征 | runtimeConfig | app.config |
|---|---|---|
| 客户端 | Hydrated | Bundled |
| 环境变量 | ✅ 是 | ❌ 否 |
| 响应式 | ✅ 是 | ✅ 是 |
| 类型支持 | ✅ 是 | ✅ 是 |
| 每个请求的配置 | ❌ 否 | ✅ 是 |
| 热模块替换 | ❌ 否 | ✅ 是 |
| 非原始的JS类型 | ❌ 否 | ✅ 是 |
runtimeConfig 和 app.config 都允许您向应用程序公开变量。然而，它们之间存在一些关键差异：
runtimeConfig支持环境变量，而app.config不支持。这使得runtimeConfig更适合于需要使用环境变量在构建之后指定的值。- 在运行时，
runtimeConfig的值在客户端上被填充，而app.config的值在构建过程中被捆绑。 app.config支持热模块替换（HMR），这意味着您可以在开发过程中无需完全重新加载页面即可更新配置。app.config的值可以与 TypeScript 完全类型化，而runtimeConfig不能。
何时使用 runtimeConfig 和 app.config
为了决定是使用 runtimeConfig 还是 app.config，可以按照以下方式考虑：
-
runtimeConfig：使用 runtimeConfig 来处理需要使用环境变量在构建之后指定的私有或公共令牌。这适用于敏感信息或在不同环境之间可能会更改的值。
-
app.config：使用app.config来处理在构建时确定的公共令牌，例如网站配置（主题变体、标题）或任何不敏感的项目配置。由于app.config支持HMR，因此特别适用于在开发过程中可能需要更新而无需完全重新加载页面的值。
结论
在 Nuxt 应用程序中，runtimeConfig 和 app.config 具有不同的用途。
runtimeConfig 非常适用于处理需要使用环境变量的私有或公共令牌，而 app.config 则非常适合用于在构建时确定的公共令牌和项目配置。
通过选择适合您的用例的正确配置选项，您可以确保您的Nuxt应用程序既安全又易于维护。
