开始使用 Nuxt i18n 模块 的基础是通过 vueI18n 选项使用 Vue I18n 进行翻译。
export default defineNuxtConfig({
modules: ['@nuxtjs/i18n'],
i18n: {
vueI18n: './i18n.config.ts' // 如果您使用自定义路径，则为默认路径
}
})
export default defineI18nConfig(() => ({
legacy: false,
locale: 'en',
messages: {
en: {
welcome: 'Welcome'
},
fr: {
welcome: 'Bienvenue'
}
}
}))
i18n.config 文件导出了与 Vue I18n 的 createI18n 函数相同的选项。配置通过该模块的 Nuxt 插件（运行时）内部传递给 createI18n 函数。有关配置的更多详细信息，请参见 Vue I18n 文档。
现在，在您项目的 pages 目录中放置（或编辑）以下页面组件：
<script setup>
const { setLocale } = useI18n()
</script>
<template>
<div>
<div>
<button @click="setLocale('en')">en</button>
<button @click="setLocale('fr')">fr</button>
<p>{{ $t('welcome') }}</p>
</div>
</div>
</template>
您现在有一个非常简单的基于 Vue I18n 的翻译环境可以使用了！通过点击这两个 <button> 元素，可以在英语和法语之间切换，您可以看到“欢迎”这个词的翻译，并且页面 URL 变为相应的语言。
一些由 @nuxtjs/i18n 提供的组合函数，例如 useI18n，是 由 Nuxt 自动导入的。
如果您想显式导入它们，可以使用 #imports，如下所示：
<script setup>
import { useI18n, useLocalePath } from '#imports'
// ...
</script>
Nuxt i18n 模块 扩展了集成的 Vue I18n，以为 Nuxt 应用提供一些 i18n 功能。在这里，我们介绍其中一个功能，即通过扩展 Nuxt 页面和路由进行链接本地化。
您需要额外设置 defaultLocale 和 locales 选项，如以下配置所示。
为了本地化链接，您可以使用 locales 选项中提供的代码作为 URL 路径前缀，除了 defaultLocale（有关更多信息，请阅读 路由）。
export default defineNuxtConfig({
modules: ['@nuxtjs/i18n'],
i18n: {
+ locales: ['en', 'fr'], // 用于 URL 路径前缀
+ defaultLocale: 'en', // Nuxt 页面和路由的默认语言
}
})
在您的应用中使用 <NuxtLink> 渲染内部链接时，您需要获取当前语言的正确 URL。为此，Nuxt i18n 模块 提供了一些帮助组合：
您可以使用 useLocalePath 本地化 URL 路径。
useLocalePath 是一个组合函数，用于返回一个函数，以获取给定路径的本地化 URL。第一个参数可以是路径、路由名称或用于更复杂路由的对象。第二个参数可以传递语言代码，以生成特定语言的链接：
<script setup>
const localePath = useLocalePath()
</script>
<template>
<NuxtLink :to="localePath('index')">{{ $t('home') }}</NuxtLink>
<NuxtLink :to="localePath('/')">{{ $t('home') }}</NuxtLink>
<NuxtLink :to="localePath('index', 'en')">Homepage in English</NuxtLink>
<NuxtLink :to="localePath('/user/profile')">Route by path to: {{ $t('profile') }}</NuxtLink>
<NuxtLink :to="localePath('user-profile')">Route by name to: {{ $t('profile') }}</NuxtLink>
<NuxtLink :to="localePath({ name: 'category-slug', params: { slug: category.slug } })">
{{ category.title }}
</NuxtLink>
</template>
请注意，localePath 可以使用路由的无前缀路径，该路径必须以 '/' 开头，或者使用路由的基本名称来生成本地化 URL。基本名称对应于 Nuxt 在解析 pages 目录时生成的名称，更多信息请见 Nuxt 文档。
您可以使用 useSwitchLocalePath 本地化当前路径的语言。
useSwitchLocalePath 是一个组合函数，它返回另一个语言中当前页面的链接：
<script setup>
const switchLocalePath = useSwitchLocalePath()
</script>
<template>
<NuxtLink :to="switchLocalePath('en')">English</NuxtLink>
<NuxtLink :to="switchLocalePath('fr')">Français</NuxtLink>
</template>
您可以使用 useLocaleRoute 本地化高级 URL 路径。这在您希望以编程方式控制内部链接时非常有用。
useLocaleRoute 是一个组合函数，用于返回给定页面的 Route 对象。
它的工作原理与 useLocalePath 类似，但返回 Vue Router 解析的路由，而不是完整的路由路径。这可能很有用，因为从 useLocalePath 返回的路径可能不会包含提供的输入的所有信息（例如，页面未指定的路由参数）。
<script setup>
const localeRoute = useLocaleRoute()
function onClick() {
const route = localeRoute({ name: 'user-profile', query: { foo: '1' } })
if (route) {
return navigateTo(route.fullPath)
}
}
</script>
<template>
<button @click="onClick">Show profile</button>
</template>