懒加载翻译
对于包含大量翻译内容的应用程序，最好不要将所有消息打包在主包中，而是只懒加载用户选择的语言。这可以通过Nuxt i18n 模块实现，让模块知道您的翻译文件的位置，以便在应用加载或用户切换到其他语言时动态导入它们。
要启用翻译懒加载，请在配置Nuxt i18n 模块时遵循以下步骤：
- 将
lazy选项设置为true（或设置为 配置对象，以便自定义一些选项）。 - 将
langDir选项设置为包含翻译文件的目录（不能为空）。 - 将
locales选项配置为一个对象数组，其中每个对象都有一个file或files键，其值为对应于语言区域的翻译文件。 - 可选地，移除您可能通过
vueI18n选项传递给 Vue I18n 的所有消息。 - 每个
file或files可以返回一个Object，或一个返回Promise的函数，该Promise必须返回一个Object。
基本用法
示例文件结构：
nuxt-project/
├── lang/
│ ├── 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,
langDir: 'lang',
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/
├── lang/
│ ├── 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,
langDir: 'lang',
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,
langDir: 'lang',
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 函数将始终加载消息，不必要的加载可能影响性能。