今天,我们将讨论如何使用 vue-i18n 国际化插件(i18n)提供的一些格式化选项。我们还将讨论如何处理在一个地方没有可用的字符串时的落后问题。我们将使用 vue-i18n 插件由 Kazuya Kawaguchi撰写,这篇文章是 building from this previous one,它介绍了Vue.js 应用中使用 vue-i18n for internationalization (i18n)。
vue-i18n 提供了一些方法来格式化您的应用程序字符串,我们甚至可以定义一个自定义的格式化程序,如果您不喜欢默认的风格,我们还可以提供错误,当我们错过的字符串给定局。
App 设置
我们将首先假设您已经创建了一个简单的Vue应用程序,现在我们将使用您偏好的方法添加Vie-i18n插件:
1# Yarn
2$ yarn add vue-i18n
3
4# npm
5$ npm install vue-i18n
6
7# Vue CLI 3.x+
8$ vue add i18n
我会跳过该帖子中的<SelectLocale />组件的代码,因为它不会改变,但如果您从上次跟随,请放心!
1[label main.js]
2import Vue from 'vue';
3import VueI18n from 'vue-i18n';
4
5import App from './App.vue';
6
7Vue.use(VueI18n);
8
9const messages = {
10 en: {
11 message: {
12 hello: 'Hello, {name}!'
13 }
14 },
15 de: {
16 message: {
17 hello: 'Guten Tag, {name}!'
18 }
19 }
20};
21
22const i18n = new VueI18n({
23 locale: 'en',
24 messages
25});
26
27new Vue({
28 render: h => h(App),
29 i18n
30}).$mount('#app');
1[label App.vue]
2<template>
3 <div id="app">
4 <HelloGator />
5 </div>
6</template>
7
8<script>
9import HelloGator from './components/HelloGator.vue';
10
11export default {
12 name: 'App',
13 components: {
14 HelloGator
15 }
16}
17</script>
1[label components/HelloGator.vue]
2<template>
3 <div>{{ $t('message.hello', { name: 'Gator' }) }}</div>
4</template>
5
6<script>
7export default { name: 'Gator' }
8</script>
格式特性
我们已经涵盖了 vue-i18n 与上述代码使用的基本格式化,该插件提供了其他一些与格式化相关的功能,如列表,HTML 和自定义格式化。
列表
vue-i18n 插件还提供了使用变量列表进行格式化的方法,我们将通过其索引在我们的应用程序字符串中可访问的$t的第二参数来传递一系列字符串:
1[label main.js]
2const messages = {
3 en: {
4 message: {
5 hello: 'Hello, {name}!',
6 counting: 'One: {0}, Two: {1}, Three: {2}'
7 }
8 },
9 de: {
10 message: {
11 hello: 'Guten Tag, {name}!',
12 counting: 'Eins: {0}, Zwei: {1}, Drei: {2}'
13 }
14 }
15};
现在让我们将我们的message.counting字符串添加到HelloGator.vue:
1[label Template: components/HelloGator.vue]
2<div>
3 {{ $t('message.hello', { name: 'Gator' }) }}
4 <br />
5 {{ $t('message.counting', ['🐊', '🤖', '👽']) }}
6</div>
HTML 的
vue-i18n 插件还允许我们直接在我们的应用程序字符串中使用 HTML。
我们将添加下面的message.welcome应用程序字符串,并带有<strong>标签:
1[label main.js]
2const messages = {
3 en: {
4 message: {
5 hello: 'Hello, {name}!',
6 counting: 'One: {0}, Two: {1}, Three: {2}',
7 welcome: '<strong>Welcome!</strong>'
8 }
9 },
10 de: {
11 message: {
12 hello: 'Guten Tag, {name}!',
13 counting: 'Eins: {0}, Zwei: {1}, Drei: {2}',
14 welcome: '<strong>Wilkommen!</strong>'
15 }
16 }
17};
现在让我们将我们的HTML应用程序字符串添加到HelloGator.vue:
1[label Template: components/HelloGator.vue]
2<div>
3 {{ $t('message.hello', { name: 'Gator' }) }}
4 <br />
5 {{ $t('message.counting', ['🐊', '🤖', '👽']) }}
6 <br />
7 {{ $t('message.welcome') }}
8</div>
你现在应该看到一个大胆的欢迎!或欢迎!取决于当地。
卢比在铁路
还有对 Ruby on Rails 风格 i18n 的支持,如果这是你的偏好:
1const messages = {
2 en: {
3 message: {
4 hello: 'Hello, %{name}!',
5 ...
6 }
7 },
8 ...
9}
客服
您可能不需要此功能,但Vue-i18n插件还允许您定义自己的自定义格式器. 我们不会在这里详细说明这一点,但它主要涉及写一个函数,该函数将取代插件提供的$t翻译功能。
落后
vue-i18n 插件允许我们轻松反弹另一个 locale 的应用程序串,如果当前 locale 缺少任何。
让我们添加另一个名为message.description的应用程序字符串,该字符串只在英语中可用,我们还会指定fallbackLanguage字符串,以便插件使用英语应用程序字符串,如果它们在其他地方缺少:
1[label main.js]
2const messages = {
3 en: {
4 message: {
5 hello: 'Hello, {name}!',
6 description: 'This sentence is in English!'
7 }
8 },
9 de: {
10 message: {
11 hello: 'Guten Tag, {name}!'
12 }
13 }
14};
15
16const i18n = new VueI18n({
17 locale: 'en',
18 fallbackLocale: 'en',
19 messages
20});
现在让我们添加我们仅用英语的消息到HelloGator.vue:
1[label Template: components/HelloGator.vue]
2<div>
3 {{ $t('message.hello', { name: 'Gator' }) }}
4 <br />
5 {{ $t('message.description') }}
6</div>
您会注意到,当您将本地变更为de时,我们会看到第一条消息在德语和第二条消息在英语中。
包装上
凭借 vue-i18n 提供的所有格式化选项,您很少需要自己实现自定义格式化逻辑。有足够的外包支持来覆盖大多数与国际化应用程序相关的格式化使用案例。