製作多國語系的網頁並不困難，只要把各國的語言製作好，再針對語系自動的切換，這樣就只要一頁就可完成，就不用分繁中、英文、日文、簡中版，每當一修改時，就得改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:'メイウンディー' } } }
Step4
建立預設的語系，而locale後方對應的就是語系名稱。
const i18n = new VueI18n({ locale: 'tw', messages, })
Step4
接著設定語系要套用的區塊，而這邊則是輸入DIV的ID或Class名稱。
new Vue({ i18n }).$mount('#wrap')
Step5
完成後，就可看到，當locale設為tw，就會顯示繁中。
Step6
當locale設為en，就會顯示英文，是不是很簡單又方便呀！下回當需要製作多國語言時，不妨可試試看囉！
#範例預覽