使用 @nuxtjs/i18n 的最快方式是定义支持的 locales 列表，并通过 vueI18n 选项提供一些翻译消息给 vue-i18n：
{
modules: [
'@nuxtjs/i18n'
],
i18n: {
locales: ['en', 'fr', 'es'],
defaultLocale: 'en',
vueI18n: {
fallbackLocale: 'en',
messages: {
en: {
welcome: 'Welcome'
},
fr: {
welcome: 'Bienvenue'
},
es: {
welcome: 'Bienvenido'
}
}
}
}
}
通过这个设置，@nuxtjs/i18n 为你所有的页面生成本地化的 URL，使用在 locales 选项中提供的代码作为前缀，除了 defaultLocale （了解更多信息请参阅 routing）。
vueI18n 选项被原样传递给 vue-i18n，有关可用选项，请参考 文档。
在你的应用中使用 <nuxt-link> 渲染内部链接时，你需要为当前语言获取正确的 URL。为此，@nuxtjs/i18n 注册了一个全局混入，提供了一些辅助函数：
localePath – 返回给定页面的本地化 URL。第一个参数可以是路径或路由名称，或者更复杂路由的对象。可以将语言代码作为第二个参数传入，以生成特定语言的链接：<nuxt-link :to="localePath('index')">{{ $t('home') }}</nuxt-link>
<nuxt-link :to="localePath('/')">{{ $t('home') }}</nuxt-link>
<nuxt-link :to="localePath('index', 'en')">Homepage in English</nuxt-link>
<nuxt-link :to="localePath('/app/profile')">Route by path to: {{ $t('Profile') }}</nuxt-link>
<nuxt-link :to="localePath('app-profile')">Route by name to: {{ $t('Profile') }}</nuxt-link>
<nuxt-link :to="localePath({ name: 'category-slug', params: { slug: category.slug } })">
{{ category.title }}
</nuxt-link>
<!-- 还可以省略 'name' 和 'path'。 -->
<nuxt-link :to="localePath({ params: { slug: 'ball' } })">{{ category.title }}</nuxt-link>
请注意，localePath 可以使用路由的未加前缀的路径，该路径必须以 '/' 开头或路由的基本名称来生成本地化 URL。基本名称对应于 Nuxt 在解析你的 pages/ 目录时生成的名称，更多信息请参见 Nuxt 的文档。
switchLocalePath – 返回当前页面在另一种语言下的链接：<nuxt-link :to="switchLocalePath('en')">English</nuxt-link>
<nuxt-link :to="switchLocalePath('fr')">Français</nuxt-link>
为了方便，这些方法在应用的上下文中也可用：
export default ({ app }) => {
// 获取主页的本地化路径
const localePath = app.localePath('index')
// 获取切换当前路由到法语的路径
const switchLocalePath = app.switchLocalePath('fr')
}
localeRoute – 返回给定页面的 Route 对象。它的工作方式类似于 localePath，但返回由 Vue Router 解析的路由，而不仅仅是完整的路由路径。这可能是有用的，因为从 localePath 返回的完整路径可能不包含所提供输入的所有信息（例如页面未指定的路由参数）。const { fullPath } = localeRoute({ name: 'index', params: { foo: '1' } })
localeLocation – 返回给定页面的 Location 对象。它的工作方式类似于 localePath，但返回由 Vue Router 解析的 Location，而不仅仅是完整的路由路径。这可能是有用的，因为从 localePath 返回的完整路径可能不包含所提供输入的所有信息（例如页面未指定的路由参数）。<a href="#" @click="$router.push(localeLocation({ name: 'index', params: { foo: '1' } }))">
导航
</a>