Lzh on GitHub

Vue I18n 配置

配置 Vue I18n 的运行时选项

Vue I18n 配置

虽然 Nuxt I18n 和 Vue I18n 之间共享一些选项,但有一系列选项是 Vue I18n 特有的,例如:

  • fallbackWarn: 控制回退警告。
  • missingWarn: 控制缺失本地化警告。
  • formatter: 提供自定义消息格式化函数。
  • numberFormats: 配置自定义数字格式。
  • datetimeFormats: 配置自定义日期时间格式。
  • ...更多

这些只是 Vue I18n 中可用运行时选项的几个示例,请查阅 Vue I18n 文档 以探索所有可用选项。

Vue I18n 特定选项不能在 nuxt.config 中配置,并且与 Nuxt I18n 使用或提供的功能没有重叠。

添加 Vue I18n 配置文件

要配置选项,你可以在 <rootDir>/i18n 目录中创建一个 i18n.config.ts 文件,此文件应该有一个默认导出,其中包含一个返回 Vue I18n 选项的函数。

Nuxt I18n 提供了一个宏函数 defineI18nConfig 来改进类型,但一个普通的函数也足够:

i18n/i18n.config.ts
export default defineI18nConfig(() => {
  return {
    // vue-i18n options
  }
})

配置文件从 <rootDir>/i18n 解析,并自动查找并加载使用默认文件名 i18n.config 的配置文件。这可以使用 vueI18n 选项进行配置。

何时使用

当你需要配置涉及运行时函数或无法序列化以进行构建时处理的数据的 Vue I18n 选项时,请使用 i18n.config.ts。这通常发生在以下情况:

  • 你需要根据用户输入或外部 API 动态加载或操作本地化数据。
  • 你正在使用自定义格式化函数或其他不可序列化的选项。
  • 你需要使用 Nuxt I18n 的构建时配置不支持的 Vue I18n 选项。

Nuxt 配置的优势

虽然可以在 nuxt.config.ts 中配置相同(或功能上相同)的选项(messages - 而不是 localesdefaultLocale 等),但建议将 Nuxt I18n 支持的尽可能多的配置保留在 nuxt.config 中的 i18n 键下。

Nuxt I18n 将在构建步骤期间使用这些选项,并且可以通过与 @intlify/unplugin-vue-i18n 等其他库集成来配置和优化功能。

Vue I18n 配置文件将在每个请求的运行时加载,这会增加服务器响应时间,尤其是在高流量应用程序中。这是因为服务器需要为每个传入请求解析和处理配置并将其与 Nuxt I18n 设置的配置合并,而不是在构建时只做一次。