vuejs插件_VueJS 2的基本翻译插件

vuejs插件

Vue-Polyglot (Vue-Polyglot)

basic translation plugin for VueJS 2+.

VueJS 2+的基本翻译插件。

安装 (Installation)

npm install --save vue-polyglot

TLDR (TLDR)

• can load translation asynchronously with HTTP requests (use axios module)

  可以通过HTTP请求异步加载翻译(使用axios模块)

• guess browser language and use it automatically

  猜测浏览器语言并自动使用

• default message directly in your component

  默认消息直接在您的组件中

  {{ $t('error_684', 'User already exists') }}

  {{ $t('error_684', 'User already exists') }}

• load data in translation

  加载翻译数据

  this.$t('helloUser', 'hello {user}', {user: 'toto'}) > hello toto

  this.$t('helloUser', 'hello {user}', {user: 'toto'}) > hello toto

免责声明： (Disclaimer:)

This is not a plugin to integrate AirBnb's Polyglot.js into Vue, but a different implementation of its own.

这不是将AirBnb的Polyglot.js集成到Vue中的插件，而是它自己的不同实现。

例 (Example)

<div id="app">
  <h1>{{$t('title', 'Vue-Polyglot in English')}}</h1>
  <p>{{ createdBy }}</p>
  <p>
    <button type="button"
            v-for="lang in this.$polyglot.languagesAvailable"
            v-on:click="showAppIn(lang)">
      {{lang}}
    </button>
  </p>
</div>

import Polyglot from 'vue-polyglot';

Vue.use(window.Polyglot.default, {
  defaultLanguage: 'en',
  languagesAvailable: ['fr', 'es']
});

Vue.locales({
  'fr': {
    'title': 'Vue-Polyglot en Français',
    'createdBy': 'Créé par {user}',
  },
  'es': {
    'title': 'Vue-Polyglot en Español',
    'createdBy': 'Creado por {user}',
  }
});

new Vue({
  el: '#app',
  methods: {
    showAppIn: function(lang) {
      this.$polyglot.setLang({lang: lang});
    }
  },
  computed: {
    createdBy: function() {
      return this.$t('createdBy', 'Created by {user}', {user: 'Guillaume Vincent (@guillaume20100)'});
    }
  }
});

API (API)

Vue.use(Polyglot, {
  defaultLanguage: 'en',
  languagesAvailable: ['zh', 'fr']
});

Vue.locales({
  'fr': {
    'hello': 'bonjour',
    'hiUser': 'bonjour {user}'
  },
  'zh': {
    'hello': '你好',
    'hiUser': '你好 {user}'
  }
})

$ t(key [，fallbackMessage] [，data]) ($t(key[, fallbackMessage][, data]))

同步加载翻译 (Loading translations synchronously)

Set locales with Vue.locales option in your app:

在您的应用中使用Vue.locales选项设置语言环境：

Vue.locales({
  'fr': {
    'hello world': 'bonjour monde'
  },
  'zh': {
    'hello world': '你好，世界'
  }
});

异步加载翻译文件 (Loading translation file asynchronously)

this。$ polyglot.getLocale(options = {baseURL ='i18n'，lang ='auto'，ext ='.json'}) (this.$polyglot.getLocale(options = {baseURL = 'i18n', lang = 'auto', ext = '.json'}))

Vue.use(Polyglot, {
  defaultLanguage: 'en',
  languagesAvailable: ['zh', 'fr']
});

new Vue({
    el: '#test',
    beforeCreate() {
      this.$polyglot.getLocale({baseURL: 'dist/i18n'});
    },
    methods: {
      getTranslationAndShowAppInChinese() {
        this.$polyglot.getLocale({lang: 'zh'});
      }
    }
  })

It will load asynchronously translations using browser's language. For example if browser language is fr-FR, languages available are ['zh', 'fr'], this.$polyglot.getLocale({baseURL: 'dist/i18n'}) will get translation from dist/i18n/fr.json file.

它将使用浏览器的语言异步加载翻译。 例如，如果浏览器语言为fr-FR ，可用语言为['zh', 'fr'] ，则this.$polyglot.getLocale({baseURL: 'dist/i18n'})将从dist/i18n/fr.json获得翻译dist/i18n/fr.json文件。

this.$polyglot.getLocale({lang: 'zh'}) will get translation from i18n/zh.json file.

this.$polyglot.getLocale({lang: 'zh'})将从i18n/zh.json文件获取翻译。

同步扩展翻译 (Extend translations synchronously)

Vue.locales replace all locales. If you want to update translations use extendLocales method instead:

Vue.locales替换所有语言环境。 如果要更新翻译，请使用extendLocales方法：

this.$polyglot.extendLocales({
  'fr': {
    'title': 'Vue-Polyglot en Français (🦄🖐️)'
  },
  'es': {
    'title': 'Vue-Polyglot en Español (🦄🖐️)',
  },
  'zh': {
    'title': 'Vue-Polyglot在中国 (🦄🖐️)',
  }
});

更改使用语言 (Changing the language to use)

Use the setLang method of the $polyglot property, like this:

使用$polyglot属性的setLang方法，如下所示：

Vue.component({
  methods: {
    showAppInChinese() {
      this.$polyglot.setLang({lang: 'zh'});
    }
  }
});

翻译自: https://vuejsexamples.com/basic-translation-plugin-for-vuejs-2/

vuejs插件