首先，介紹下專案結構，如圖：

1.在i18n/lang下編寫json檔案。

//zh_CN.json
{"message":{"hello": "關於"}}
//en.json
{"message":{"hello": "about"}}

2.i18n/index.js 國際化配置檔案

import VueI18n from 'vue-i18n'//需先安裝vue-i18n
import Vue from 'vue'

Vue.use(VueI18n)

var langMessages = {
 cn: require('./lang/cn.json'),
 en: require('./lang/en.json'
 
)
}
var i18n = new VueI18n({
  locale: 'cn',
  messages: langMessages
})
export default i18n

3.main.js中引入i18n以及配置檔案

import i18n from './i18n' //引入配置檔案

new Vue({
    el: '#app',
    router,
    i18n: i18n,   //例項中 引用國際化
    template: '<App/>',
    components: { App },
});

/*
//1s後更改語言
setTimeout(function(){
    i18n.locale = "en"
},1000)
*/
 

4.在html中應用

//建議此方法
<span v-text="$t('message.hello')"></span>
//or
<p>{{ $t("message.hello") }}</p>