Javascript

[教學] VUE+VUE i18n 讓HTML靜態網頁,也支援多國語言

梅干2018/08/28
梅問題-VUE+VUE i18n 打造靜態網頁也支援並切換多國語言版
  製作多國語系的網頁並不困難,只要把各國的語言製作好,再針對語系自動的切換,這樣就只要一頁就可完成,就不用分繁中、英文、日文、簡中版,每當一修改時,就得改N個頁面,有時不注意還會忘了漏改,而在製作多國語言,最簡單的作法,就像WordPress,製作成一個語系檔,再用PHP去讀取裡面的檔案。
  由於梅干最近手邊的專案,因為沒有讀取資料庫,就單純的文字內容,所以梅干就簡單的使用HTML靜態頁面,而一開始只有中、英、簡,但事後又追加了日、韓,讓梅干感到相當的困擾,且資料在管理上有些不易,有時當臨時增減個東西時,就得改個五、六次,因此梅干想了很久,終於想到了一個解套的方法,那就是利用VUE i18n套件,就能實現一般的HTML也能切換多國語言,且製作上也相當的簡單,因此有需要製作多國語言的朋友,現在也一塊來看看囉!
Step1
首先,先將vue與vue i18n引用到網頁中。
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script src='https://unpkg.com/vue-i18n/dist/vue-i18n.js'></script>

Step2
接著建立多國語言的HTML標籤,而message.hello與message.minwt,而.hello與.minwt就是語言的名稱。
<div id="wrap">
  <h1 v-html="$t('message.hello')"></h1>
  <h1 v-html="$t('message.minwt')"></h1>
</div>


Step3
接著建立語言包,而這邊的en、tw、cn、jp所指的就是語系名稱,而message中的hello與minwt,就是對應的名稱。
const messages = {
  en: {
    message: {
      hello: 'hello',
      minwt:'minwt'
    }
  },
  tw: {
    message: {
      hello: '哈囉',
      minwt:'梅問題'
    }
  },
  cn: {
    message: {
      hello: '哈啰',
      minwt:'梅问题'
    }
  },
  jp: {
    message: {
      hello: 'ハロー',
      minwt:'メイウンディー'
    }
  }
}

梅問題-VUE+VUE i18n 打造靜態網頁也支援並切換多國語言版
Step4
建立預設的語系,而locale後方對應的就是語系名稱。
const i18n = new VueI18n({
  locale: 'tw', 
  messages,
})

Step4
接著設定語系要套用的區塊,而這邊則是輸入DIV的ID或Class名稱。
new Vue({ i18n }).$mount('#wrap')

Step5
完成後,就可看到,當locale設為tw,就會顯示繁中。梅問題-VUE+VUE i18n 打造靜態網頁也支援並切換多國語言版
Step6
當locale設為en,就會顯示英文,是不是很簡單又方便呀!下回當需要製作多國語言時,不妨可試試看囉!
梅問題-VUE+VUE i18n 打造靜態網頁也支援並切換多國語言版
#範例預覽