懒加载翻译
对于包含大量翻译内容的应用程序，最好不要将所有消息都打包到主包中，而是仅懒加载用户选择的语言。 这可以通过 Nuxt i18n 模块 实现，让模块知道你的翻译文件在哪里，这样它就可以在应用程序加载或用户切换到另一种语言时动态导入它们。 要启用翻译懒加载，请在配置 Nuxt i18n 模块 时遵循以下步骤：
- 将
locales选项配置为对象数组，其中每个对象都有一个file或files键，其值是与语言环境对应的翻译文件。 - 可选地，删除你可能通过
vueI18n选项传递给 Vue I18n 的所有消息。 - 每个
file或files可以返回Object，或返回Promise的函数，该Promise必须返回Object。
基本用法
文件结构示例：
-| nuxt-project/
---| i18n/
-----| locales/
-------| en-US.json
-------| es-ES.js
-------| fr-FR.ts
---| nuxt.config.ts
配置示例：
export default defineNuxtConfig({
i18n: {
locales: [
{
code: 'en',
file: 'en-US.json'
},
{
code: 'es',
file: 'es-ES.js'
},
{
code: 'fr',
file: 'fr-FR.ts'
}
],
defaultLocale: 'en'
}
})
export default defineI18nLocale(async locale => {
return {
welcome: 'Bienvenue'
}
})
// 或者
export default {
welcome: 'Bienvenue'
}
如果函数返回 Nuxt i18n 模块中可用的对象，你可以配置动态语言环境消息，例如通过 fetch 的 API（包括外部 API）或后端：
export default defineI18nLocale(locale => {
// 例如，从 nuxt 服务器获取语言环境消息
return $fetch(`/api/${locale}`)
})
多文件懒加载
files 属性可用于懒加载多个文件。
这很有用，因为它能有效地管理只定义差异而不复制语言环境消息的多个文件。
例如，以支持西班牙语为例。根据 维基百科，有 20 个国家 将西班牙语作为官方语言！
如果这些国家都使用 file 进行配置，由于每个国家的语言环境消息重复，将很难维护。
在这种情况下，将目标语言的所有共享（通用）语言环境消息保存在单独的文件中，并为每个国家单独定义方言变体，以防止重复，这样更容易维护。
以下是包含西班牙语语言环境文件的 lang 目录示例：
-| nuxt-project/
---| i18n/
-----| locales/
-------| es.json # 通用西班牙语的语言环境消息
-------| es-AR.json # 阿根廷的语言环境消息
-------| es-UY.json # 乌拉圭的语言环境消息
-------| es-US.json # 美国的语言环境消息
-------| ... # 其他国家
---| nuxt.config.ts
以下是 nuxt.config.ts 中的配置示例：
export default defineNuxtConfig({
i18n: {
locales: [
/**
* 西班牙语国家的 `files` 示例定义
*/
{
code: 'es-AR',
name: 'Español (Argentina)',
// 懒加载顺序：`es.json` -> `es-AR.json`，然后将 'es-AR.json' 与 'es.json' 合并
files: ['es.json', 'es-AR.json']
},
{
code: 'es-UY',
name: 'Español (Uruguay)',
// 懒加载顺序：`es.json` -> `es-UY.json`，然后将 'es-UY.json' 与 'es.json' 合并
files: ['es.json', 'es-UY.json']
},
{
code: 'es-US',
name: 'Español (Estados Unidos)',
// 懒加载顺序：`es.json` -> `es-US.json`，然后将 'es-US.json' 与 'es.json' 合并
files: ['es.json', 'es-US.json']
}
],
defaultLocale: 'en'
}
})
请注意 files 属性的用法，因为上述配置指定了一个包含多个文件名的数组。
@nuxtjs/i18n 将按照 files 中指定的数组顺序懒加载语言环境消息。然后它将按照加载顺序覆盖语言环境消息。
在上面的 es-AR 示例中，files 中定义了 es.json 和 es-AR.json。在这种情况下，@nuxtjs/i18n 懒加载 es.json，然后懒加载 es-AR.json 并覆盖 es.json 语言环境消息。
在上面的示例中，files 只定义了两个文件，当然你也可以指定两个以上的文件。在这种情况下，文件也将按数组顺序加载和覆盖。
通过利用语言环境消息按顺序覆盖的特性，可以通过定义差异来管理语言环境消息。通过将共享（通用）语言环境消息作为 files 的第一个条目添加，然后是区域/方言语言环境消息的文件条目，可以管理资源，同时避免语言环境消息的重复。
缓存
懒加载的语言环境消息根据其文件名进行缓存，file 和 files 在不同语言环境之间共享，一旦加载后将从缓存中使用。默认情况下，静态文件启用缓存，而通过函数返回消息的文件禁用缓存。
可以通过将 file 或 files 的条目设置为具有以下类型签名的对象 { path: string, cache?: boolean} 来按文件配置缓存。以下示例演示了几种有效的文件配置。
export default defineNuxtConfig({
i18n: {
locales: [
/**
* 西班牙语国家的 `files` 示例定义
*/
{
code: 'es-ES',
name: 'Español (Spain)',
// 文件禁用缓存
file: { path: 'es.js', cache: false }
},
{
code: 'es-AR',
name: 'Español (Argentina)',
// 文件禁用缓存
files: [
{ path: 'es.js', cache: false },
{ path: 'es-AR.js', cache: false }
]
},
{
code: 'es-UY',
name: 'Español (Uruguay)',
// 字符串和对象配置可以混合
files: [{ path: 'es.js', cache: false }, 'es-UY.json']
}
],
defaultLocale: 'en'
}
})
使用未加载语言环境的翻译
由于只加载当前语言环境的翻译，你必须手动加载一个语言环境才能使用其翻译。
Nuxt i18n 扩展了 Vue i18n 以提供 loadLocaleMessages 函数来手动加载语言环境消息，以下示例演示了其用法。
const { loadLocaleMessages, t } = useI18n()
await loadLocaleMessages('nl')
const welcome = computed(() => t('welcome')) // Welcome!
const welcomeDutch = computed(() => t('welcome', 1, { locale: 'nl' })) // Welkom!
loadLocaleMessages 函数将始终加载消息，不必要的加载可能会影响性能。