今天我们将介绍vue-i18n国际化插件 (i18n)如何提供多种格式选项。我们还将介绍如何在没有可用于语言环境的字符串时处理回退。我们将使用Kazuya Kawaguchi编写的vue-i18n 插件，这篇文章是在上一篇文章的基础上构建的，它介绍了在 Vue.js 应用程序中使用vue-i18n进行国际化 (i18n)。

vue-i18n提供了多种格式化应用字符串的方法。如果您不喜欢默认样式，我们甚至可以定义自定义格式化程序。当我们缺少给定语言环境的字符串时，我们还可以提供有用的回退。

应用程序设置

我们首先假设您已经创建了一个简单的Vue应用程序。现在我们将使用您喜欢的方法添加vue-i18n插件：

# Yarn
$ yarn add vue-i18n

# npm
$ npm install vue-i18n

# Vue CLI 3.x+
$ vue add i18n

我们将继续我们在上一篇文章中离开的地方。我将跳过<SelectLocale />那篇文章中组件的代码，因为它不会改变，但如果你从上次开始关注它，请随意包含它🐊！

import Vue from 'vue';
import VueI18n from 'vue-i18n';

import App from './App.vue';

Vue.use(VueI18n);

const messages = {
  en: {
    message: {
      hello: 'Hello, {name}!'
    }
  },
  de: {
    message: {
      hello: 'Guten Tag, {name}!'
    }
  }
};

const i18n = new VueI18n({
  locale: 'en',
  messages
});

new Vue({
  render: h => h(App),
  i18n
}).$mount('#app');

<template>
  <div id="app">
    <HelloGator />
  </div>
</template>

<script>
import HelloGator from './components/HelloGator.vue';

export default {
  name: 'App',
  components: {
    HelloGator
  }
}
</script>

<template>
  <div>{{ $t('message.hello', { name: 'Gator' }) }}</div>
</template>

<script>
export default { name: 'Gator' }
</script>

格式化功能

我们已经在上面的代码中介绍了vue-i18n使用的基本格式。该插件提供了一些其他与格式相关的功能，例如列表、HTML 和自定义格式化程序。

列表

该VUE-i18n的插件还提供了使用的变量列表的方式进行格式化。我们将传递一个字符串数组作为第二个参数，$t可以通过它们的索引在我们的应用程序字符串中访问它：

const messages = {
  en: {
    message: {
      hello: 'Hello, {name}!',
      counting: 'One: {0}, Two: {1}, Three: {2}'
    }
  },
  de: {
    message: {
      hello: 'Guten Tag, {name}!',
      counting: 'Eins: {0}, Zwei: {1}, Drei: {2}'
    }
  }
};

现在让我们将message.counting字符串添加到HelloGator.vue：

<div>
  {{ $t('message.hello', { name: 'Gator' }) }}
  <br />
  {{ $t('message.counting', ['🐊', '🤖', '👽']) }}
</div>

HTML

该VUE-i18n的插件也让我们直接在我们的应用程序的字符串使用HTML。任何标准 HTML 都将在浏览器中呈现。

我们将在message.welcome下面添加应用字符串，并用<strong>标签包裹：

const messages = {
  en: {
    message: {
      hello: 'Hello, {name}!',
      counting: 'One: {0}, Two: {1}, Three: {2}',
      welcome: '<strong>Welcome!</strong>'
    }
  },
  de: {
    message: {
      hello: 'Guten Tag, {name}!',
      counting: 'Eins: {0}, Zwei: {1}, Drei: {2}',
      welcome: '<strong>Wilkommen!</strong>'
    }
  }
};

现在让我们将我们的 HTML 应用程序字符串添加到HelloGator.vue：

<div>
  {{ $t('message.hello', { name: 'Gator' }) }}
  <br />
  {{ $t('message.counting', ['🐊', '🤖', '👽']) }}
  <br />
  {{ $t('message.welcome') }}
</div>

您现在应该看到一个大胆的欢迎！或威尔科曼！取决于语言环境。

Ruby on Rails

如果您愿意，还有对 Ruby on Rails 样式 i18n 的开箱即用支持：

const messages = {
  en: {
    message: {
      hello: 'Hello, %{name}!',
      ...
    }
  },
  ...
}

风俗

您可能不需要此功能，但vue-i18n插件还允许您定义自己的自定义格式化程序。我们不会在这里详细介绍这一点，但主要涉及编写一个函数来代替$t插件提供的翻译函数。如果您想了解更多信息，请务必查看自定义格式文档。

回退

如果当前语言环境缺失，vue-i18n插件允许我们轻松回退另一个语言环境的应用程序字符串。

让我们添加另一个名为的应用程序字符串message.description，该字符串仅提供英文版本。fallbackLanguage如果其他语言环境中缺少英语应用程序字符串，我们还将指定该插件是否使用英语应用程序字符串：

const messages = {
  en: {
    message: {
      hello: 'Hello, {name}!',
      description: 'This sentence is in English!'
    }
  },
  de: {
    message: {
      hello: 'Guten Tag, {name}!'
    }
  }
};

const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages
});

现在让我们将仅英文的消息添加到HelloGator.vue：

<div>
  {{ $t('message.hello', { name: 'Gator' }) }}
  <br />
  {{ $t('message.description') }}
</div>

您会注意到，当将区域设置切换到时，de我们将看到第一条德语消息和第二条英语消息。如果您想开始添加对新语言环境的支持但尚未定义所有应用程序字符串，这将非常有用。

包起来

使用vue-i18n提供的所有格式选项，您很少需要自己实现自定义格式逻辑。有足够的开箱即用支持来涵盖与国际化应用程序相关的大多数格式化用例。与往常一样，请务必查看文档！🤓