有時候我們的專案需要支援多種語言，切換語言設定時，就自動切換整個專案的文字顯示。

安裝 vue-i18n

// npm 安裝
npm install vue-i18n

// script 引入
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

使用

在 main.js 中引入 vue-i18n

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

const i18n = new VueI18n({
    locale: 'zh-CN',    // 語言標識
    // this.$i18n.locale // 通過切換locale的值來實現語言切換
    messages: {
      'zh-CN': require('./languages/lang/zh'),   // 中文語言包
      'en-US': require('./languages/lang/en')    // 英文語言包
    }
})

new Vue({
  el: '#app',
  i18n,  // 把 i18n 掛載到 vue 根例項上
  store,
  router,
 

  template: '<App/>',
  components: { App }
})

上面即是將 vue-i18n 引入 vue 專案中，引入以後，實現國際化，當然至少需要兩種語言，我們假設需要中英文兩種語言切換，那麼我們就需要中英兩套語言的檔案，只需要兩個 js 檔案，通過 require 的形式引入到 main.js。

專案下新增一個目錄languages

---src
    --languages
       --lang
          -- zh.js // 中文語言包
          -- en.js // 英文語言包
          -- .. // 其他語言，暫未實踐
 

zh

export const m = {
    common: {
        message: '訊息'
    },
    xxx: {
		...
    }
}

en

export const m = {
    common: {
        message: 'Messages'
    },
    xxx: {
		...
    }
}

資料渲染

<template>
    ...
    // v-text
    <div v-text="$t('m.common.message')"></div>
    // {{}}
    <div>{{$t('m.common.message')}}</div>
    ...
</template>

// js
$t('m.common.message')

語言切換

如何實現中英文的切換呢？

...
locale: 'zh-CN',    // 語言標識
    messages: {
      'zh-CN': require('./languages/lang/zh'),   // 中文語言包
      'en-US': require('./languages/lang/en')    // 英文語言包
    }
...

在main.js中，我們可以發現，當locale的值為zh-CN時，當前語言為中文，當locale的值為en-US時，當前語言為英文。

我們可以做一個切換按鈕，點選來實現切換中英文。

// 點選事件，切換語言
switchLang () {
  this.$confirm('您確定切換語言嗎?', '提示', {
       confirmButtonText: '確定',
       cancelButtonText: '取消',
       type: 'warning'
    }).then(() => {
       const locale = this.$i18n.locale;
       locale === 'zh-CN' ? this.$i18n.locale = 'en-US' : this.$i18n.locale = 'zh-CN';
    }).catch(() => {
       this.$message({
           type: 'info',
       });          
  });
}