應用九：Vue之國際化（vue-i18n）

 

vue-i18n是一款針對Vue.js 的國際化插件，具體應用步驟如下：

 

一、安裝插件

npm install vue-i18n --save

 

二、在main.js中引入插件

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

 

三、創建i18n實例

const i18n = new VueI18n({ 
 // 默認語言
 locale: 'zh',
 // 引入對應的語言包文件
 messages: {   
    'zh': require('@/assets/languages/zh.json'),   
    'en': require('@/assets/languages/en.json') 
  }
});

　　注：為了在頁面刷新后仍然能夠保持當前的語言環境，一般會將語言參數緩存到localStorage中，locale屬性的初始賦值方式會變為 locale: localStorage.getItem(‘lang’) || ‘zh’

 

四、在assets目錄下新建對應的語言json文件

// zh.json
{
  "message": {
    "greeting": "你好"
  }
}

// en.json
{
  "message": {
    "greeting": "hello"
  }
}

　　注：json文件中的key值必須使用雙引號。

 

五、使用

// 在template中的使用方式: 
<span>{{$t('message.greeting')}}</span>

// 在script腳本中的使用方式:
this.$t('message.greeting')

 

六、語言切換

　　語言切換只要改變i18n實例中locale的值即可:

this.$i18n.locale = ‘en’；
localStorage.setItem(‘lang’, ‘en’)

 

　　上述呢就是vue國際化的基礎用法~