今天我们将介绍如何在我们的Vue应用程序中实现i18n,国际化,我们将使用由Kazuya Kawaguchi(https://github.com/kazupon)撰写的Vue-i18n 插件,他是Vue.js的核心开发者之一。
在我们的Web应用程序中提供国际化支持对于让全球受众使用它们至关重要,而全球许多人可以说或理解英语,通过增加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
下面我们将设置基本的Vue应用程序,你会注意到我们只是将东西连接在一起而没有真正使用插件,但这会给你一个想法,我们的应用程序在添加i18n支持之前如何行为。
1[label main.js]
2import Vue from 'vue';
3import VueI18n from 'vue-i18n';
4
5import App from './App.vue';
6
7Vue.use(VueI18n);
8
9new Vue({
10 render: h => h(App),
11}).$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>Hello, Gator</div>
4</template>
5
6<script>
7export default { name: 'Gator' }
8</script>
形式化
vue-i18n 插件允许使用简单的单边语法来格式化字符串. 在这里,我们正在添加一个消息对象,该对象将为我们的应用程序提供字符串,这些字符串需要根据当前的本地进行翻译。
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');
要在组件中使用我们的应用程序字符串,Vue-i18n 提供了 $t() 函数,该函数将根据给定的密钥的当前位置提供翻译. 在这种情况下,我们正在请求 message.hello 字符串并为它提供模板变量 name。
1[label Template: components/HelloGator.vue]
2<template>
3 <div>{{ $t('message.hello', { name: 'Gator' }) }}</div>
4</template>
由于我们默认的位置为en,你应该看到Hello,Gator!在屏幕上渲染。
改变本地
现在你可能想知道我们如何访问或更改我们已添加的应用程序字符串的其他本地。我们在我们的初始设置中增加了对德国本地的支持。 vue-i18n 插件通过$i18n变量提供对i18n实例的访问。
让我们添加一个组件,允许我们在飞行中切换本地:
1[label components/SelectLocale.vue]
2<template>
3 <div>
4 <select v-model="$i18n.locale">
5 <option
6 v-for="(lang, i) in langs"
7 :key="`lang-${i}`"
8 :value="lang"
9 >
10 {{ lang }}
11 </option>
12 </select>
13 </div>
14</template>
15
16<script>
17export default {
18 name: 'SelectLocale',
19 data() {
20 return { langs: ['en', 'de'] }
21 }
22}
23</script>
1[label Template: App.vue]
2<template>
3 <div id="app">
4 <SelectLocale />
5 <HelloGator />
6 </div>
7</template>
1[label Script: App.vue]
2import HelloGator from './components/HelloGator.vue'
3import SelectLocale from './components/SelectLocale.vue'
4
5export default {
6 name: 'App',
7 components: {
8 HelloGator,
9 SelectLocale
10 }
11}
现在,在应用程序重新加载后,你会看到一个<select>元素,允许我们更改当前的 locale. 尝试将所选的 locale 更改为de以查看渲染的输出如何更改为Guten Tag, Gator!。
包装上
vue-i18n 插件是一个很好的解决方案,可以轻松地将国际化添加到我们的现有 Vue 应用程序中。它是一个出色的,生产准备的库,具有许多功能,以覆盖大多数,如果不是所有 i18n 问题。