在vue中使用vue-i18n

 

一、安裝插件

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({

      // 使用localStorage存儲語言狀態是為了保證頁面刷新之后還是保持原來選擇的語言狀態

    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中引入插件

import i18n from '@/plugins/i18n' // 導入vue-i18n

new Vue({

  router,

  i18n, // 此處需要掛載上i18n，不要忘記

  render: h => h(App)

}).$mount('#app')

 

五、在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’)