用i18next使你的应用国际化-Vue

ref: https://www.i18next.com/

在vue项目中安装相关依赖：

• i18next
• i18next-vue
• i18next-browser-languagedetector，用于检测用户语言

npm install i18next i18next-vue i18next-browser-languagedetector

创建i18n.js文件：

import i18next from 'i18next'
import I18NextVue from 'i18next-vue'
import LanguageDetector from 'i18next-browser-languagedetector'

i18next
  .use(LanguageDetector)
  .init({ // 初始化i18next
    debug: true,
    fallbackLng: 'en',
    resources: {
      en: {
        translation: {
          // 此处放置翻译内容
        }
      }
    }
  });

export default function (app) {
  app.use(I18NextVue, { i18next })
  return app
}

在main.js中导入i18n.js：

import { createApp } from 'vue'
import i18n from './i18n'
import App from './App.vue'

i18n(createApp(App)).mount('#app')

对于第一个文本，我们只使用一个简单的welcome key 来直接调用$t函数。$t或多或少与i18next.t相同。

对于第二个文本，我们使用v-html指令直接输出真正的HTML。

注意： 在您的网站上动态渲染任意HTML是非常危险的，因为它很容易导致XSS漏洞。只在可信内容上使用v-html，不要在用户提供的内容上使用。

// TranslationShowCase.vue
<template>
  <div class="hello">
    <h1>{{ $t('welcome') }}h1>
    <p v-html="$t('descr')">p>
  div>
template>

<script>
export default {
  name: 'TranslationShowCase'
}
script>

往i18n.js添加相关翻译文本：

...

...
    resources: {
      en: {
        translation: {
          welcome: 'Welcome to Your Vue.js App',
          descr: 'For a guide and recipes on how to configure / customize '
            + 'this project,
check out the '
            + '
            + 'rel="noopener">vue-cli documentation.'
        }
      }
    }
...

语言切换器

<template>
  <div class="hello">
    <h1>{{ $t('welcome') }}h1>
    <p v-html="$t('descr')">p>
    <hr />
    <div>
      <div v-if="languages">
        <span v-for="(lng, index) in Object.keys(languages)" :key="lng">
          <a v-if="$i18next.resolvedLanguage !== lng" v-on:click="$i18next.changeLanguage(lng)">
            {{ languages[lng].nativeName }}
          a>
          <strong v-if="$i18next.resolvedLanguage === lng">
            {{ languages[lng].nativeName }}
          strong>
          <span v-if="index < (Object.keys(languages).length - 1)"> | span>
        span>
      div>
    div>
  div>
template>

<script>
export default {
  name: 'TranslationShowCase',
  data () {
    return {
      languages: {
        en: { nativeName: 'English' },
        de: { nativeName: 'Deutsch' }
      }
    }
  }
}
script>

添加翻译文本：

// i18n.js
...

...
    resources: {
      en: {
        translation: {
          welcome: 'Welcome to Your Vue.js App',
          descr: 'For a guide and recipes on how to configure / customize '
            + 'this project,
check out the '
            + '
            + 'rel="noopener">vue-cli documentation.'
        }
      },
      de: {
        translation: {
          welcome: 'Willkommen zu Deiner Vue.js App',
          descr: 'Eine Anleitung und Rezepte zum Konfigurieren/Anpassen '
            + 'dieses Projekts findest du
in der '
            + '
            + 'rel="noopener">vue-cli-Dokumentation.'
        }
      }
    }
  ...

获取当前语言

自i18next v21以来，i18next. resolvedlanguage被设置为当前解析的语言，并且可以用作主要使用的语言，上例中有使用。

i18next.language vs. i18next.languages

i18next.language;
// 设置为当前检测或设置的语言

i18next.languages;
// 设置为将用于查找翻译值的语言代码数组
// 设置语言后，将使用新的语言代码填充此数组
// 除非被覆盖，否则将使用该代码的不太特定的版本填充此数组，以用于回退目的，然后是回退语言列表

// 初始化回退语言
i18next.init({
    fallbackLng: ["es", "fr", "en-US", "dev"]
});
// 改变语言
i18next.changeLanguage("en-US-xx");
// 新语言和它的更一般的形式，然后是回退
i18next.languages; // ["en-US-xx", "en-US", "en", "es", "fr", "dev"]
// 再次改变语言
i18next.changeLanguage("de-DE");
// 不保留上一次设置的语言
i18next.languages; // ["de-DE", "de", "es", "fr", "en-US", "dev"]

处理复数和插值

可以看看另一篇博客文章用i18next使你的应用国际化-React

格式化

可以看看另一篇博客文章用i18next使你的应用国际化-React

Context

可以看看另一篇博客文章用i18next使你的应用国际化-React

分离翻译和代码

在i18next-http-backend的帮助下将翻译从代码中分离出来，并将它们放在专用的json文件中。

将翻译文件移动到public文件夹：

修改i18n.js文件，使用i18next-http-backend：

import i18next from 'i18next'
import I18NextVue from 'i18next-vue'
import LanguageDetector from 'i18next-browser-languagedetector'
import Backend from 'i18next-http-backend'

i18next
  .use(Backend) // 从服务器加载翻译
  .use(LanguageDetector)
  .init({
    debug: true,
    fallbackLng: 'en'
  });

export default function (app) {
  app.use(I18NextVue, { i18next })
  return app
}

现在翻译是异步加载的。如果您的网络连接很慢，可能会注意到，在翻译加载之前，只显示i18n key。

为了防止这种情况，我们使用了Vue.js的新Suspense功能。

首先，让我们通过导出i18next 初始化promise来调整i18n.js文件:

...

export const
  i18nextPromise = i18next
  .use(Backend)
  .use(LanguageDetector)
  .init({
    debug: true,
    fallbackLng: 'en'
  });

...

在App.vue中使用该promise：

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <TranslationShowCase />
template>

<script>
import TranslationShowCase from './components/TranslationShowCase.vue'
import { i18nextPromise } from './i18n.js'

export default {
  name: 'App',
  components: {
    TranslationShowCase
  },
  // 与Subspense结合使用.
  // 当翻译不在内存中时有用...
  async setup() {
    await i18nextPromise
    return {}
  }
}
script>

创建Subspenser.vue组件：

<template>
  <Suspense>
    <template #default>
      <App />
    template>
    <template #fallback>
      <div>
        <img alt="Vue logo" src="./assets/logo.png">
        <h1>Loading...h1>
      div>
    template>
  Suspense>
template>

<script>
import App from './App.vue'

export default {
  name: 'Suspenser',
  components: {
    App
  }
}
script>

在main.js中使用：

import { createApp } from 'vue'
import i18n from './i18n'
import App from './Suspenser.vue'

i18n(createApp(App)).mount('#app')

现在，只要你的翻译被加载，你就会看到回退模板:

如果你想支持一种新的语言，你只需要创建一个新的文件夹和一个新的翻译json文件。这使您可以直接将翻译json发送给一些专业的翻译人员。或者，如果您正在使用翻译管理系统，您可以使用cli同步文件。