Vue國際化實現

安裝npm install vue-i18n

• 建立語言包
  通常在src目錄下建立common/lang
  英文：en.js

export const m = { 
    lang: 'CN',
    music: 'Music',//網易雲音樂
    findMusic: 'FIND MUSIC',//發現音樂
    myMusic: 'MY MUSIC',//個人音樂
    friend: 'FRIEND',//朋友
    musician: 'MUSICIAN',//音樂人
    download: 'DOWNLOAD',//下載客戶端
    setting: 'SETTING',
}

中文：zn.js

export const m = {
    lang: '英文',
    music: '網易雲音樂',
    findMusic: '發現音樂',
    myMusic: '個人音樂',
    friend: '朋友',
    musician: '音樂人',
    download: '下載客戶端',
    setting: '設置',
}

原理都是導出一個變量m

• 建立js文件i18n.js

import Vue from 'vue'
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')    // 英文語言包路徑引入
  }
});

export default i18n

• 在main.js引入

//vuex引入
import store from './mainJS/store'

使用

• 在函數中使用：this.$t('m.music')

• 在屬性中使用：<span v-text="$t('m.music')"></span>

• 在標籤中使用：<span>{{$t('m.music')}}</span>