vue-i18n

1.先下載

cnpm install vue-i18n --save-dev
複製代碼

2.在main.js引入

import VueI18n from 'vue-i18n'
 
Vue.use(VueI18n) // 經過插件的形式掛載
複製代碼

3.在src新建個lib文件夾，裏面在新建語言文件夾lang

//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: '下載客戶端'
}

複製代碼

3.而後在main.js中寫以下代碼

// 判斷當前是什麼語言，若是本地有語言就用本地的，沒有則默認中文
function lang() {
    // 將選擇的語言存在localStorage中
    let t = localStorage.getItem('lang')
    if (t) return t
        // 默認中文
    else return 'zh'
}
const language = lang()
const i18n = new VueI18n({
        locale: language, // 語言標識
        //this.$i18n.locale // 經過切換locale的值來實現語言切換
        messages: {
            'zh': require('./lib/lang/zh'), // 中文語言包
            'en': require('./lib/lang/en') // 英文語言包
        }
    })

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

4.切換語言

最後咱們只須要經過觸發事件的形式，來控制 locale 的值，去調用對應的語言包就能夠實現國際化啦。

changeLangEvent() {
      if (localStorage.getItem("lang") === "zh") {
        this.lang = "en";
        this.$i18n.locale = this.lang; //關鍵語句
      } else {
        this.lang = "zh";
        this.$i18n.locale = this.lang; //關鍵語句
      }
      localStorage.setItem("lang", this.lang);
    },
複製代碼

6.渲染方式

<span>{{$t('m.music')}}</span>
複製代碼

參考連接：blog.csdn.net/Dream_xun/a…