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如下:


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

应用程序配置

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如下:


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

runtimeConfigvsapp.config

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

  • runtimeConfig:使用环境变量构建后需要指定的私有或公共令牌。
  • app.config:在构建时确定的公共令牌、网站配置(如主题变体)、标题和任何不敏感的项目配置。
特点 runtimeConfig app.config
客户方 水合物 捆绑
环境变量 ✅是的 ❌ 否
被动的 ✅是的 ✅是的
类型支持 ✅部分 ✅是的
每次请求的配置 ❌ 否 ✅是的
热模块更换 ❌ 否 ✅是的
非原始JS类型 ❌ 否 ✅是的

你可能感兴趣的:(前端,javascript,vue.js)