对于具有大量翻译内容的应用程序，最好不要将所有消息打包到主包中，而是懒加载用户所选择的语言。这可以通过 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，由于每个国家的语言环境消息重复，将很难维护。
在这种情况下，将所有共享的（通用）语言环境消息放在一个单独的文件中，并为每个国家单独定义方言变体会更容易，从而防止重复，这样更容易维护。
以下是包含西班牙语语言环境文件的 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']
}
],
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')) // 欢迎!
const welcomeDutch = computed(() => t('welcome', 1, { locale: 'nl' })) // 欢迎荷兰人!
loadLocaleMessages 函数将始终加载消息，不必要的加载可能会影响性能。