懒加载翻译
对于包含大量翻译内容的应用程序，最好不要将所有消息打包在主包中，而是懒加载用户选择的语言。这可以通过 @nuxtjs/i18n 模块来实现，通过让模块知道你的翻译文件所在的位置，以便在应用加载时或当用户切换到另一种语言时动态导入它们。要启用翻译懒加载，请在配置 @nuxtjs/i18n 时遵循以下步骤：
- 将
lazy选项设置为true（如果想自定义一些选项，可以设置为 配置对象）。 - 将
langDir选项设置为包含翻译文件的目录（不能为空）。 - 将
locales选项配置为一个对象数组，其中每个对象都有一个file键，其值是对应于语言环境的翻译文件。 - 可选地，移除你可能通过
vueI18n选项传递给 vue-i18n 的所有消息。 - 每个
file可以返回一个Object或一个function（支持Promises）。
示例文件结构：
nuxt-project/
├── lang/
│ ├── en-US.js
│ ├── es-ES.js
│ ├── fr-FR.js
├── nuxt.config.js
配置示例：
nuxt.config.ts
i18n: {
locales: [
{
code: 'en',
file: 'en-US.js'
},
{
code: 'es',
file: 'es-ES.js'
},
{
code: 'fr',
file: 'fr-FR.js'
}
],
lazy: true,
langDir: 'lang/',
defaultLocale: 'en'
}
语言文件示例：
lang/en-US.ts
export default async (context, locale) => {
return await Promise.resolve({
welcome: '欢迎'
})
}
// 或者
export default {
welcome: '欢迎'
}
请注意，如果你想在导出的函数中使用来自
@nuxtjs/axios 模块的 $axios 实例，则必须在注册 @nuxtjs/i18n 模块 之后 注册 @nuxtjs/axios 模块。这一规则实际上也适用于任何添加插件的模块，且你希望在该函数中使用它的功能。懒加载配置选项
lazy 选项可以分配一个配置对象，以自定义懒加载行为。
支持的配置选项包括：
skipNuxtState
默认情况下，对于当前选定的语言环境（除非它恰好是 fallbackLocale），语言消息被注入到服务器端的 Nuxt “state” 中，并在客户端重用。这样做的好处是，消息在客户端可同步访问，从而避免了额外的网络请求。缺点是，这使得每个页面的服务器响应变得更大（尤其是当消息很多时）。这适用于服务器端渲染和静态生成的网站。
启用 skipNuxtState 后，语言消息将从相应的 JavaScript 包加载（对于备用语言从主包加载，对于其他语言从各自的包加载）。这使得有效负载更小，但意味着页面加载可能会因额外请求而变慢（尽管浏览器端缓存会尽可能地帮助）。