Nuxt3+i18n 实现国际化多语言以及服务端多语言使用 nuxt3 在实现国际化的过程中，不仅仅是对页面上的`文本`

简介

nuxt3 作为一个 vue 服务端渲染框架，提供了一种直观且可扩展的方式来创建类型安全、高性能和生产级别的全栈Web应用和网站。

在实现国际化的过程中，不仅仅是对页面上的文本做多语言，还包括了时间日期，以及服务端多语言和多语言组件嵌套等。

下面是 nuxt3 的官方文档和 NuxtI18n 的相关文档

nuxt3

NuxtI18n

安装 NuxtI18n

npx nuxi@latest module add i18n

配置

nuxt.config.ts 配置

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/i18n'
  ],
})

我们可以建一个 config 文件夹，来放i18n相关的配置。

i18n.config.ts 该文件主要是作为多语言json的配置

import en from '../locales/en.json'
import zhCN from '../locales/zh-cn.json'
import ja from '../locales/ja.json'
import ko from '../locales/ko.json'
import fr from '../locales/fr.json'
import { currentLocales } from './i18n'

export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'en',
  availableLocales: currentLocales.map(l => l.code),
  fallbackLocale: 'en', // 区配不到的语言就用en
  messages: {
    en,
    'zh-cn': zhCN,
    zh: zhCN,
    ja,
    ko,
    fr
  }
}))

再添加一个 i18n 文件来定义，多语言的选项，主要用于在页面中进行切换。

const locales = [
  {
    code: 'en',
    file: 'en.json',
    name: 'English'
  },
  {
    code: 'zh-cn',
    file: 'zh-cn.json',
    name: '简体中文'
  },
  {
    code: 'ja',
    file: 'ja.json',
    name: '日本語'
  },
  {
    code: 'ko',
    file: 'ko.json',
    name: '한국어'
  },
  {
    code: 'fr',
    file: 'fr.json',
    name: 'Français'
  }
]

export const currentLocales = locales
export const currentLocaleCodes = locales.map(l => l.code)

然后再在 i18n.config.ts 添加一下配置

nuxt-i18n 会在 cookie 中添加一个用于存储当前语言环境的变量，当我们修改语言时，nuxt-i18n 会更新它。cookieKey 可以根据自己的需要进行更改

import { currentLocales } from './config/i18n'

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/i18n',
    'dayjs-nuxt'
  ],
  i18n: {
    locales: currentLocales,
    langDir: 'locales',
    defaultLocale: 'en',
    strategy: 'no_prefix',
    vueI18n: './config/i18n.config.ts',
    // 启用浏览器语言检测，以便在访问者第一次访问您的站点时自动将其重定向到首选语言环境。
    detectBrowserLanguage: {
      // 启动 cookie
      useCookie: true,
      // 用于存储当前语言环境的变量名
      cookieKey: 'i18n_redirected',
      // (建议用于改进SEO) -仅检测站点根路径(/)上的浏览器区域设置。只有当使用策略而不是“no_prefix”时才有效。
      redirectOn: 'root'
    }
  },
})

在项目中的locales目录下添加对应的语言文件

用法

通过以上的配置，我们就可以，在页面中通过 $t() 使用多语言了

常规用法

<div class="text-center font-bold text-lg text-primary">
  {{ $t('login.welcome_back') }}
</div>

插入变量

如果需要变量加入到多语言中，可以通过传参传递进去

"built_at": "构建于 {0}"

$t('appInfo.built_at', ['2024/08/22'])

如果是多个变量，则按顺序定义即可,例如 {0} {1}

在 $t 第二个数组参数中，按顺序传递

组件插槽

如果需要对多语言文本中的某些文字单独添加样式，可以使用 i18n-t 组件

例如我们想实现一个这样的效果，对某些文案添加样式

我们就可以使用i18n-t组件

"policy_tips": "By continuing, you are indicating that you have read and acknowledge the {0} and {1}.",
"service": "Terms of Service",
"policy": "Privacy Policy"

<i18n-t keypath="login.policy_tips">
  <ULink
    active-class="text-primary"
    inactive-class="text-primary dark:text-primary-400 hover:underline"
  >
    {{ $t('login.service') }}
  </ULink>
  <ULink
    active-class="text-primary"
    inactive-class="text-primary dark:text-primary-400 hover:underline"
  >
    {{ $t('login.policy') }}
  </ULink>
</i18n-t>

切换多语言

要实现语言的切换，可以添加一个Language的组件，通过调用 setLocaleCookie 的方法来修改当前语言

<script setup lang="ts">
const { locales, locale, setLocaleCookie } = useI18n()

function changeLanguage (item: any) {
  locale.value = item.code
  setLocaleCookie(locale.value)
}
</script>

<template>
  <UDropdown :items="[locales]" :ui="{ item: { disabled: 'cursor-text select-text' } }" :popper="{ placement: 'bottom-start' }">
    <UButton
      icon="i-heroicons:language-16-solid"
      color="gray"
      variant="ghost"
      aria-label="Theme"
    />
    <template #item="{ item }">
      <div
        class="truncate text-left w-full"
        :class="{ 'text-primary': locale === item.code }"
        @click="changeLanguage(item)"
      >
        {{ item.name }}
      </div>
    </template>
  </UDropdown>
</template>

<style socped>
.active {
  color: var(--primary);
}
</style>

时间多语言

在使用 dayjs 时间格式化的时候，也需要切换对应的语言。

安装 dayjs-nuxt

# Using npm
npm install --save-dev dayjs-nuxt

i18n.config.ts 添加一下配置

import { currentLocales, currentLocaleCodes } from './config/i18n'

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/i18n',
    'dayjs-nuxt'
  ],
  dayjs: {
    locales: currentLocaleCodes,
    plugins: ['relativeTime', 'utc', 'timezone', 'localizedFormat'],
    defaultLocale: 'en'
  }
})

前面 currentLocaleCodes 中定义的多语言key值，最好按照dayjs中语言的key保持一致，否则需要手动转一次

最后在页面中使用

<script>
const dayjs = useDayjs()
const { locale } = useI18n()

watch(locale, () => {
  dayjs.locale(locale.value)
}, {
  immediate: true
})
</script>

<template>
  <span :title="dayjs(buildTimeDate).format('LLL')">{{ $t('appInfo.built_at', [$dayjs(buildTimeDate).fromNow()]) }}</span>
</template>

页面效果

服务端多语言

我们在一些接口中需要，返回文案时，这时候需要对文案进行翻译。 在nuxt3中可以这样做：

在 config 目录中创建 localeDetector.ts 文件，这里主要是获取请求的时候，用户端使用的语言，依次从请求参数、cookie、请求头中获取语言。

// Detect based on query, cookie, header
export default defineI18nLocaleDetector((event, config) => {
  // try to get locale from query
  const query = tryQueryLocale(event, { lang: '' }) // disable locale default value with `lang` option
  if (query) {
    return query.toString()
  }

  // try to get locale from cookie
  const cookie = tryCookieLocale(event, { lang: '', name: 'i18n_redirected' }) // disable locale default value with `lang` option
  if (cookie) {
    return cookie.toString()
  }

  // try to get locale from header (`accept-header`)
  const header = tryHeaderLocale(event, { lang: '' }) // disable locale default value with `lang` option
  if (header) {
    return header.toString()
  }

  // If the locale cannot be resolved up to this point, it is resolved with the value `defaultLocale` of the locale config passed to the function
  return config.defaultLocale
})

然后，在 i18n.config.ts 的i18n里面再加入以下配置

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/i18n',
    'dayjs-nuxt'
  ],
  i18n: {
    ...,
    experimental: {
      localeDetector: './config/localeDetector.ts'
    }
  },
})

这样就可以在具体的接口中，来使用翻译了

这里以一个注册的接口为例，在注册的时候需要先检验该邮箱是否已经被注册了，如果已经注册，则返回提示信息。

"server": {
    "email_exists": "该邮箱地址已存在"
  }

// register.post.ts
...
const t = await useTranslation(event)

const user = await prisma.user.findUnique({
    where: { email }
  })
  if (user) {
    return {
      status: 'error',
      message: t('server.email_exists')
    }
  }
 ...

页面效果：

i18n Ally 插件

在开发国际化的项目中，非常推荐使用这个插件，可以在编辑器中展示默认的翻译文本，以及翻译审阅，开发体验非常棒。

最后

预览地址：nuxt-demo-sooty.vercel.app/signup

Github 地址：github.com/fh332393900…

最后，欢迎大家交流探讨，如果本文对您有帮助的话，可以点赞👍和star⭐

欢迎转载，转载还请注明出处。