相對於網站等一些需求 我們有需要做國際化的需求，具體步驟如下：

首先安裝 vue-i18n

npm install vue-i18n

import VueI18n from 'vue-i18n'

Vue.use(VueI18n) // 通過外掛的形式掛載

const i18n = new VueI18n({
    locale: 'zh-CN',    // 語言標識
    //this.$i18n.locale // 通過切換locale的值來實現語言切換
    messages: {
      'zh-CN': require('./common/lang/zh'),   // 中文語言包
      'en-US': require('./common/lang/en')    // 英文語言包
    }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  i18n,  // 不要忘記
  store,
  router,
  template: '<App/>',
  components: { App }
})

上面的程式碼正式將 vue-i18n 引入 vue 專案中，建立一個 i18n 例項物件，方便全域性呼叫。我們通過 this.$i18n.locale 來進行語言的切換

需要兩個 js 檔案，通過 require 的形式引入到 main.js。

en.js 英文語言包：

export const m = {
music: 'Music',//網易雲音樂
findMusic: 'FIND MUSIC',//發現音樂
myMusic: 'MY MUSIC',//我的音樂
friend: 'FRIEND',//朋友
musician: 'MUSICIAN',//音樂人
download: 'DOWNLOAD'//下載客戶端
}
zh.js中文語言包：

export const m = { music: '網易雲音樂', findMusic: '發現音樂', myMusic: '我的音樂', friend: '朋友', musician: '音樂人', download: '下載客戶端' }

元件中如何去切換 locale 的值，實現語言切換。

locale: 'zh-CN', // 語言標識
messages: {
'zh-CN': require('./common/lang/zh'), // 中文語言包
'en-US': require('./common/lang/en') // 英文語言包
}
---------------------

 
 changeLangEvent() {
   
 
this.$confirm('確定切換語言嗎?', '提示', {
       confirmButtonText: '確定',
       cancelButtonText: '取消',
       type: 'warning'
    }).then(() => {
       if ( this.lang === 'zh-CN' ) {
          this.lang = 'en-US';
          this.$i18n.locale = this.lang;//關鍵語句
       }else {
          this.lang = 'zh-CN';
          this.$i18n.locale = this.lang;//關鍵語句
       }
    }).catch(() => {
       this.$message({
           type: 'info',
       });          
    });

這邊的重點就是，點出的‘’關鍵語句‘’：this.$i18n.locale,當你賦值為‘zh-CN’時，導航欄就變成中文；當賦值為 ‘en-US’時，就變成英文。

vue-i18n 資料渲染的模板語法
我們知道 vue 中對於文字資料的渲染，有以‘’{{}}‘’或者 v-text、v-html等的形式，同樣的使用國際化後，依舊可以沿用，但需要一點修改。
v-text:

<span v-text="$t('m.music')"></span>

{{}}:

<span>{{$t('m.music')}}</span>