當我們在開發一套系統時，客戶源可能來是四面八方不同的國家，因應多語系的需求下，我們的網站也需要來點不同的語系切換，那要怎麼做呢?快看底下

安裝vue i18n

首先我們需要透過npm下載

$ npm install vue-i18n --save

放置資料夾與檔案

再來我們需要在src/底下設置資料夾及檔案，此處放置因人而異
src/

|- i18n
   |- en.js
   |- tw.js
   |- ch.js
   |- i18n.js

設定i18n與語言檔

// i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'

// 匯入語言檔
import en from './en'
import tw from './tw'
import ch from './ch' 

// 使用VueI18n插件
Vue.use(VueI18n)

// 取得預設語系
const locale = localStorage.getItem('locale') || 'tw'

// 建立 VueI18n 實體
const i18n = new VueI18n({
  locale,
  messages: { en, tw, ch }
})

export default i18n

語言檔的使用方式很簡單，就是鍵值對__Key: 'value'，且可以使用階層

// tw.js
export default {
  __Language: '語言',
  __Updates: '更新',
  __Messages: '郵件'
}
// another language.js...

製作切換語言介面

<template>
  <div class="header">
    <!-- 切換語系 Interface 使用BootstrapVue Dropdown -->
    <b-nav-item-dropdown right>
      <b-dropdown-item v-for="(item, index) in optionsLang" 
                       @click="setLang(item.value)"
                       :key="index">
        {{ item.text }}
      </b-dropdown-item>
    </b-nav-item-dropdown>
  </div>  
</template>
<script>
import i18n from "../i18n/i18n";
export default {
  name: 'AppHeader',
  i18n,
  data () {
    return {
      optionsLang: [
        { text: '繁體中文', value: 'tw' },
        { text: '简体中文', value: 'ch' },
        { text: 'English', value: 'en' }
      ]
    }
  },
  methods: {
    // 儲存切換的語系
    setLang (newLang) {
      i18n.locale = newLang;
      localStorage.setItem('locale', newLang);
    }
  }
}
</script>

將網站所有文字以特定語法取代

我們將所有設置的作業都處理完畢，接下來就剩下將網站的文字取代成可以切換語系的特定語法吧。
建議在翻譯時，應該要整句翻要，對應的鍵值(Key)從簡就可以。

in template

使用語法$t('__Key')

<div>
  <strong>{{$t('__Language')}}</strong>
</div>

in vue script

使用語法this.$t('__Key')

export default {
  name: "helloWorld",
  data () {
    return {
      fields: {
        Language: { label: this.$t('__Language') },
        Messages: { label: this.$t('__Messages') },
      }
    }
  }
}

in js file

必須要匯入i18n，使用語法i18n.t('__Key')

import i18n from "./i18n/i18n"

console.log(i18n.t('__Updates'))

使用複數

使用語法$tc('__Key', number, string | Array | Object)

// vue script
$tc('__Car', 10, {sum:10})
// en.js
{
  __Car: 'no Cars | one Car | {sum} Cars',
  ...
}

插入參數

使用語法$tc('__Key', Array | Object)

// vue script
$t('__SayHi', {name:'Vince'})
// en.js
{
  __SayHi: 'Hello {name},nice to see you again.',
  ...
}

參考文件

有任何問題歡迎下方留言，如果喜歡我的文章別忘了按讚、訂閱追蹤加分享唷!!
---我是分隔線-----------------------------------------------------------
PollyPO技術-前端設計轉前端工程師-JS踩坑雜記 30 天
喬依司-實作經典 JavaScript 30
五百億-Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理
eien_zheng-前端小嘍嘍的Golang學習旅程_The journey of learning Golang