懒加载翻译
对于拥有大量翻译内容的应用程序，最好不要将所有消息捆绑在主包中，而是懒加载用户所选择的语言。
这可以通过 Nuxt i18n 模块 实现，方法是告知模块翻译文件的位置，以便其在应用加载或用户切换到另一种语言时动态导入这些文件。
要启用翻译懒加载，请在配置 Nuxt i18n 模块 时按照以下步骤操作：
- 将
lazy选项设置为true（或设置为 配置对象 以自定义某些选项）。 - 将
locales选项配置为对象数组，每个对象都有一个file或files键，其值为对应语言环境的翻译文件。 - 可选地，移除可能通过
vueI18n选项传递给 Vue I18n 的所有消息。 - 每个
file或files可以返回一个Object，或者返回一个返回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'
}
],
lazy: true,
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，由于每个国家的语言环境消息重复，将很难维护。
在这种情况下，将所有共享（公共）语言环境消息保存在一个单独的文件中，并分别为每个国家定义方言变体会更容易，以避免重复，这样更易于维护。
以下是包含西班牙语语言文件的语言目录示例：
-| 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']
}
],
lazy: true,
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']
}
],
lazy: true,
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 函数将始终加载消息，不必要的加载可能会影响性能。