Nuxt3 试水（二）之项目配置

Nuxt配置

Nuxt默认配置已经涵盖了大多数场景。使用nuxt.config.ts文件可以覆盖或扩展此默认配置。nuxt.config.ts文件位于Nuxt项目的根目录。

一个最小的配置文件导出defineNuxtConfig函数，其中包含一个带有您的配置的对象。 defineNuxtConfig 帮助程序无需导入即可全局使用。

export default defineNuxtConfig({ 
 // My Nuxt config
})

可在配置参考查看对应配置。

环境变量和私有令牌

runtimeConfig API 向应用程序的其余部分公开环境变量等值。默认情况下，这些密钥仅在服务器端可用。 runtimeConfig.public 中的键也可以在客户端使用。

这些值应在nuxt.config中定义，并且可以使用环境变量重写。

nuxt.config.ts如下：

export default defineNuxtConfig({
  runtimeConfig: {
    // The private keys which are only available server-side
    apiSecret: '123',
    // Keys within public are also exposed client-side
    public: {
      apiBase: '/api'
    }
  }
})

.env如下:

# This will override the value of apiSecret
NUXT_API_SECRET=api_secret_token

这些变量使用useRuntimeConfig可组合暴露在应用程序的其余部分。

页面/index.vue如下：

<script setup>
const runtimeConfig = useRuntimeConfig()
</script>

在指南>更进一步>运行时配置中阅读更多内容。

应用程序配置

app.config.ts文件也位于Nuxt项目的根目录，用于公开可以在构建时确定的公共变量。与runtimeConfig选项相反，不能使用环境变量覆盖这些选项。

最小配置文件导出defineAppConfig函数，该函数包含一个具有配置的对象。defineAppConfig无需导入即可全局使用。

app.config.js如下：

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

这些变量使用useAppConfig可组合暴露在您的应用程序的其余部分。

页面/index.vue如下：

<script setup>
const appConfig = useAppConfig()
</script>

在指南>目录结构>应用程序配置中阅读更多内容。

runtimeConfigvsapp.config

如上所述，runtimeConfig和app.config都用于将变量暴露给应用程序的其余部分。为了确定您应该使用其中之一，以下是一些准则：

• runtimeConfig：使用环境变量构建后需要指定的私有或公共令牌。
• app.config：在构建时确定的公共令牌、网站配置（如主题变体）、标题和任何不敏感的项目配置。

特点	runtimeConfig	app.config
客户方	水合物	捆绑
环境变量	✅是的	❌ 否
被动的	✅是的	✅是的
类型支持	✅部分	✅是的
每次请求的配置	❌ 否	✅是的
热模块更换	❌ 否	✅是的
非原始JS类型	❌ 否	✅是的