vue-i18n 實現國際化語言切換

i18n（其來源是英文單詞 internationalization的首末字符i和n，18為中間的字符數）是“國際化”的簡稱。

兼容性：支持 Vue.js 2.x 以上版本。

本文是在vue項目中，前端實現國際化語言切換的功能。

---

 

安裝：

1. 下載vue-i18n，引入使用。

 

npm install vue-i18n --save

 

2. 在main.ts里面引入。創建帶有選項的 VueI18n 實例，掛載到vue上，引入根目錄創建的語言包。系統語言設置在localStorage中，默認中文簡體。

/** main.ts **/

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

// 引入語言包
const messages = {
  zh: require('./i18n/langs/zh'),  // 中文簡體
  en: require('./i18n/langs/en'), // 英文
  korean: require('./i18n/langs/korean') // 韓國語
}

// 初始化VueI18n
const i18n = new VueI18n({
  // this.$i18n.locale // 通過切換locale的值來實現語言切換
  locale: localStorage.getItem('lang') || 'zh',
  messages
})

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

3. 語言包，就是自己翻譯的語言文件。

語言包目錄結構：

 

語言包其實就是提前翻譯好的文件，鍵名一樣，鍵值就是各個語言的翻譯。

如果要添加更多國家的語言，只需要在新建語言包，引入，將翻譯的內容放進去即可。

 

 

 

 

 4. 在組件中的使用，使用語言包，必須通過$t("對象鍵名")的方式使用,只是將原來直接寫data名加個$t()。示例：

<div> {{ $t('default.home') }} </div>

5. 使用select 語言的切換，通過選中的select的值進行判斷，再通過this.$i18n.locale修改當前語言。將當前選擇的語言存到localstorage中，每次需要切換的時候，就先判斷本地存儲有沒有，如果沒有就默認是中文。

// HTML
<template>
  <el-select
    v-model="langu"
    placeholder="請選擇"
    size="mini"
    class="lang-select"
    @change="changeLang"
  >
    <el-option value="zh" label="中文簡體">中文簡體</el-option>
    <el-option value="en" label="English">English</el-option>
    <el-option value="korean" label="한국어">한국어</el-option>
  </el-select>
</template>

// js
<script lang='ts'>
import Vue from 'vue'
export default Vue.extend({
  data () {
    return {
      langu: localStorage.getItem('lang') || 'zh'
    }
  },
  methods: {
    changeLang (value: any) {
      localStorage.setItem('lang', value)
      location.reload()
    }
  }
})
</script>