用法

使用 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: '欢迎'
    },
    fr: {
      welcome: '欢迎'
    }
  }
}))

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 的翻译环境！可以使用 <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 模块 提供了一些辅助可组合函数：

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')">英文首页</NuxtLink>
  <NuxtLink :to="localePath('/user/profile')">按路径到：{{ $t('profile') }}</NuxtLink>
  <NuxtLink :to="localePath('user-profile')">按名称到：{{ $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')">英语</NuxtLink>
  <NuxtLink :to="switchLocalePath('fr')">法语</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">显示个人资料</button>
</template>