vue-i18n国际化插件

Posted on | In

vue-i18n国际化插件

原理：

​ vue-loader内添加了编译插件， vue-loader允许注入自定义模板编译， 转换编译时vue的template.基于这个原理， 这个国际化插件是在编译的时候分析了template,把$t('text')用本地语言文本替换它。然后生成三个不同版本的应用文件， 并部署。因此国际化并不是动态的，而是在我们切换环境的时候，切换对应语言的应用文件。它有三个静态版本文件，它的应用程序都是预编译好的。这就省掉了我们重新编译, 分析，寻找本地化文件并替换的时间。

vue-i18n微型实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<template>
    <div id="app">
      <h1>{{ $t('welcome-message') }}</h1>
      <button @click="changeLang('en')">English</button>
      <button @click="changeLang('zh')">中文</button>
      <button @click="changeLang('nl')">Dutch</button>
    </div>
</template>

<script>
    const i18nPlugin = {
      // Implement this!
      install(Vue, localData) {
        Vue.mixin({
          methods: {
            $t (textFlag) {
              return localData[this.lang][textFlag]
            }
          }
        })
      }
    }

    Vue.use(i18nPlugin, /* option */ {
      en: { 'welcome-message': 'hello' },
      zh: { 'welcome-message': '你好' },
      nl: { 'welcome-message': 'Hallo' }
    })

    new Vue({
      el: '#app',
      data: {
        lang: 'en'
      },
      methods: {
        changeLang (lang) {
          this.lang = lang
        }
      }
    })
</script>