来吧，咱们用vue实现一个微型vue-i18n国际化插件

说明：

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

vue-i18n微型实现

<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>
复制代码