一、安裝外掛

npm install vue-i18n --save

二、為了後續方便管理，在src下新建一個plugins資料夾專門管理外掛

三、在plugins下新建i18n.js檔案

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

const i18n = new VueI18n({

    locale: localStorage.getItem('lang') ? localStorage.getItem('lang') : 'zh',//
 
 定義預設語言為中文
    messages: {
        'zh': require('@/assets/languages/zh.json'),
        'en': require('@/assets/languages/en.json')
    }
})

export default i18n

四、在main.js中引入外掛

五、在assets目錄下新建languages資料夾存放對應的語言json檔案

// zh.json
{
  "message": {
    "greeting": "你好"
  }
}

// en.json
{
  "message": {
    "greeting": "hello"
  }
}

六、使用

// 在template中的使用方式: 
<span>{{$t('message.greeting')}}</span>

// 在script指令碼中的使用方式:
this.$t('message.greeting')

七、語言切換

　　語言切換隻要改變i18n例項中locale的值即可:

this.$i18n.locale = ‘en’；
localStorage.setItem(‘lang’, ‘en’)