vue使用i18n進行多語言切換

 

1.尚未安裝i18n時需要安裝：

npm install vue-i18n

2.在項目的main.js中增加代碼：

import Vue from 'vue'
import App from './App'
import router from './router'
import VueI18n from 'vue-i18n'
import $ from 'jquery'
Vue.config.productionTip = false
Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en-us',
  messages: {
    'en-us': require('./lang/en-us'),
    'zh-cn': require('./lang/zh-cn'),
    'zh-tw': require('./lang/zh-tw')
  }
})

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

其中：import VueI18n from 'vue-i18n'對i18n

           Vue.use(VueI18n)

           進行引入

      

這裏是我對三種語言包路徑選擇，以及初始語言的默認

這裏是我的目錄，大家不要把路徑弄錯了:

3.在相應的語言包中增加自己所需的文本即可：

4.在界面使用已經寫好的語言包時也會有一些情況：

    （1）、在template中使用，直接{{$t('contact.downLoad')}}即可，如圖：

（2）、在data中使用：$t('header.contact')，但是值得注意的是，在進行多語言切換的時候，data中的數據不能及時進行切換。

5、更改默認語言包，使用this.$i18n.locale對自己所選擇的語言進行切換即可

changeLanguage () {
    if(this.myVal == 0){
       this.$i18n.locale = 'en-us'
    }else if(this.myVal == 1){
       this.$i18n.locale = 'zh-cn'
    }else{
       this.$i18n.locale = 'zh-tw'
    }
 }