使用说明

使用 Vue I18n 进行翻译

开始使用 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 { locale, 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 的翻译环境！通过点击任一按钮，您可以在英语和法语之间切换，您可以看到单词“welcome”翻译，页面 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 模块 提供了一些帮助可组合函数：

URL 路径

您可以使用 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>

使用路由对象的 URL 路径

您可以使用 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>