vue-i18n.js_使用vue-i18n在Vue.js中实现i18n

阳光穿透心脏的1/2处 2022-11-27 04:29 170阅读 0赞

vue-i18n.js

Today we’ll cover how to implement i18n, internationalization, in our Vue apps. We’ll be using the vue-i18n [plugin][] written by [Kazuya Kawaguchi][] who is one of the core developers working on Vue.js.

今天，我们将介绍如何在我们的Vue应用程序中实现国际化i18n。 我们将使用Kaguya [Kawaguchi][Kazuya Kawaguchi]编写的vue-i18n [插件][plugin] ，他是Vue.js的核心开发人员之一 。

Providing internationalization support in our web apps is crucial to allowing them to be consumed by a global audience. While many people around the globe can speak or understand English, by adding i18n support we are opening up our applications to a much wider audience.

在我们的Web应用程序中提供国际化支持对于让全球受众消费它们至关重要。 尽管全球许多人都能说或能听懂英语，但通过增加i18n支持，我们正在向更广泛的受众开放我们的应用程序。

## 应用程式设定 **(**App Setup**)** ##

We’ll start by assuming you’ve already created a simple Vue app. Now we’ll add the vue-i18n plugin using your preferred method:

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

# Yarn
    $ yarn add vue-i18n
    
    # npm
    $ npm install vue-i18n
    
    # Vue CLI 3.x+
    $ vue add i18n

Below we’ll setup the basic Vue app. You’ll notice we’re just plugging things together without really utilizing the plugin just yet, but this will give you an idea of how our app behaves before adding i18n support.

下面，我们将设置基本的Vue应用。 您会注意到我们只是在不实际使用插件的情况下就将它们连接在一起，但这将使您在添加i18n支持之前了解我们的应用程序的行为。

main.js

import Vue from 'vue';
    import VueI18n from 'vue-i18n';
    
    import App from './App.vue';
    
    Vue.use(VueI18n);
    
    new Vue({
      render: h => h(App),
    }).$mount('#app');

App.vue

应用程序

<template>
      <div id="app">
        <HelloGator />
      </div>
    </template>
    
    <script>
    import HelloGator from './components/HelloGator.vue'
    
    export default {
      name: 'App',
      components: {
        HelloGator
      }
    }
    </script>

components/HelloGator.vue

组件/HelloGator.vue

<template>
      <div>Hello, Gator</div>
    </template>
    
    <script>
    export default { name: 'Gator' }
    </script>

## 格式化 **(**Formatting**)** ##

The vue-i18n plugin allows for formatting of strings with a simple single-bracket syntax. Here we are adding a `messages` object which will provide our app with strings that should be translated depending on the current `locale`. We initialize a `new VueI18n` instance and pass it to our Vue instance.

vue-i18n插件允许使用简单的单括号语法来格式化字符串。 在这里，我们添加了一个`messages`对象，该对象将为我们的应用提供应根据当前`locale`转换的字符串。 我们初始化一个`new VueI18n`实例，并将其传递给我们的Vue实例。

main.js

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');

To use our app strings in a component, vue-i18n provides the function `$t()` which will provide a translation based on the current locale for the given key. In this case we’re requesting the `message.hello` string and providing it with the template variable `name`.

为了在组件中使用我们的应用程序字符串， vue-i18n提供了功能`$t()` ，该功能将基于给定键的当前语言环境提供翻译。 在这种情况下，我们需要`message.hello`字符串，并为其提供模板变量`name` 。

Template: components/HelloGator.vue

模板：components / HelloGator.vue

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

Since we’re defaulting to the `en` locale, you should see `Hello, Gator!` rendered on screen.

由于我们默认为`en`区域设置，你应该看到`Hello, Gator!` 在屏幕上呈现。

## 更改语言环境 **(**Changing Locale**)** ##

Now you’re probably wondering how we can access or change to other locales that we’ve added app strings for. We’ve added support for the German locale `de` in our initial setup. The vue-i18n plugin provides components with access to the `i18n` instance through the `$i18n` variable. Simply set `$i18n.locale` to switch to a new locale.

现在您可能想知道我们如何才能访问或更改我们为其添加了应用程序字符串的其他语言环境。 我们增加了对德国的语言环境支持`de`在我们的初始设置。 vue-i18n插件使组件可以通过`$i18n`变量访问`i18n`实例。 只需设置`$i18n.locale`即可切换到新的语言环境。

Let’s add a component that allows us to switch locale on the fly:

让我们添加一个允许我们即时切换语言环境的组件：

components/SelectLocale.vue

组件/SelectLocale.vue

<template>
      <div>
        <select v-model="$i18n.locale">
          <option
            v-for="(lang, i) in langs"
            :key="`lang-${i}`"
            :value="lang"
          >
            {
        { lang }}
          </option>
        </select>
      </div>
    </template>
    
    <script>
    export default {
      name: 'SelectLocale',
      data() {
        return { langs: ['en', 'de'] }
      }
    }
    </script>

Template: App.vue

模板：App.vue

Script: App.vue

脚本：App.vue

import HelloGator from './components/HelloGator.vue'
    import SelectLocale from './components/SelectLocale.vue'
    
    export default {
      name: 'App',
      components: {
        HelloGator,
        SelectLocale
      }
    }

Now, after an app reload, you’ll see a `<select>` element that allows us to change the current locale. Try changing the selected locale to `de` to see how the rendered output changes to `Guten Tag, Gator!`.

现在，在重新加载应用程序后，您将看到一个`<select>`元素，该元素使我们可以更改当前语言环境。 尝试将选定的语言环境更改为`de`以查看呈现的输出如何更改为`Guten Tag, Gator!` 。

## 结语 **(**Wrapping Up**)** ##

The vue-i18n plugin is an excellent solution to easily add internationalization to our existing Vue apps. It’s an excellent, production-ready library with many features to cover most if not all i18n concerns. As always, make sure to check out the plugin’s [documentation][] to get a feel for all of the features it has to offer.

vue-i18n插件是一个出色的解决方案，可以轻松地将国际化添加到我们现有的Vue应用程序中。 这是一个出色的，可立即投入生产的库，具有许多功能，可以涵盖大多数(甚至不是全部)i18n问题。 与往常一样，请务必查看插件的[文档，][documentation]以了解其必须提供的所有功能。

> 翻译自: [https://www.digitalocean.com/community/tutorials/vuejs-vue-with-i18n][https_www.digitalocean.com_community_tutorials_vuejs-vue-with-i18n]

vue-i18n.js

[plugin]: https://kazupon.github.io/vue-i18n/
[Kazuya Kawaguchi]: https://github.com/kazupon
[documentation]: https://kazupon.github.io/vue-i18n/introduction.html
[https_www.digitalocean.com_community_tutorials_vuejs-vue-with-i18n]: https://www.digitalocean.com/community/tutorials/vuejs-vue-with-i18n