來吧，咱們用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>
複製代碼