情境說明
開發公司專案，大致功能差不多時，為了優化專案，提供多國語系選擇的功能。本篇文章將針對已開發的專案(使用 vue-cli 搭建)，加上 Vue i18n 功能做說明。
安裝與設定
在終端機下此指令：
🚀 Npm
npm install vue-i18n🚀 Yarn
yarn add vue-i18n在 src 目錄下，建立 common 資料夾，在之下建立 config& plugins 資料夾。config 資料夾中，建立 i18n 資料夾，此資料夾中會放置多國語系的檔案，而plugins 放 vue-i18n 的設定檔。
此篇文章將以英文en & 中文tw 作為翻譯語言，檔案結構如下：
設定檔案
1. vue-i18n.js
在 plugins 資料夾建立 vue-i18n.js，加入以下程式碼：
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import { locale as en } from '@/common/config/i18n/en'
import { locale as tw } from '@/common/config/i18n/tw'
Vue.use(VueI18n)let messages = {}
messages = { ...messages, en, tw }
const lang = localStorage.getItem('language') // 'tw' //'en'
const i18n = new VueI18n({
locale: lang,
messages,
})export default i18n
其中的 lang 變數，用 localStorage.getItem 去抓使用者設定瀏覽器的語言。
2. main.js
在上方 import 區塊加上：
import i18n from ‘./common/plugins/vue-i18n’;並在 new Vue 中加上 import 進來的 i18n
3. en.js & tw.js 加上翻譯內容
en.js 檔案內容：
// en.js
export const locale = {
TITLE: {
PROJECT_INFORMATION: 'Project Information',
PROJ_NAME: 'Proj. Name',
NOTIFY_SERVICE: 'Notify Service',
},
CONTENT: {
USER_NAME: 'User Name',
USER_NAME_REQUIRED: 'Username is required',
},
}tw.js 檔案內容：
// tw.js
export const locale = {
TITLE: {
PROJECT_INFORMATION: '專案資訊',
PROJ_NAME: '專案名稱',
NOTIFY_SERVICE: '通知推播',
},
CONTENT: {
USER_NAME: '使用者名稱',
USER_NAME_REQUIRED: '使用者名稱為必填',
},
}翻譯內容以小部分專案範例為主，實際專案會依循此規則做區塊分類，增添翻譯的內容。使用全大寫英文是為了方便查找比對。未來新增不同語言，如法炮製即可。 🙋
[補充] i18n 報錯， Cannot read properties of undefined (reading ‘install‘) at Function.Vue.use 解決辦法:
報錯的原因主要是當前使用的版本不匹配
可以下載@8版本試試看
npm install vue-i18n@8
實作翻譯內容
1. 簡易套用
經過上方設定，在 vue 組件中，使用 $t(‘鍵’) 的方式，可以取得對應 tw.js 或 en.js 中設定的內容。
以 Project.vue 檔案為範例，這邊做標題的翻譯，設定如下：
<title-bar>{{ $t('TITLE.PROJECT_INFORMATION') }}</title-bar>假設瀏覽器設定使用語言為繁體中文，翻譯完成畫面如下：
2. 原本設定在 data 的內容
上面介紹了最簡單的翻譯，針對原本設定在 data 的內容，也是類似的處理方法，不過改置於 computed 中。
同樣的 Project.vue 檔案，資料標題用 Vuetify <v-data-table>設定 headers。
原本設定在 data 中
改放至computed 中，針對 Proj.Name作為翻譯範例。
查看畫面，表格內標題 Proj.Name 已翻譯。
3. Placeholder & Error message 翻譯
以 Login.vue 檔案中的 User Name 為例。
placeholder 中也是用 $t(‘鍵’) 的方式做對應。
此處用到 Vuelidate 檢查資料的庫， error-message 這邊設定為 usernameErrors。這邊用 this.$t(‘鍵’) 去取。
登入介面的畫面，完成使用者名稱翻譯。在刻意不填寫帳號與密碼的情況下，按下登入的按鍵，可以看到使用者名稱部分已翻譯為繁體中文。
大致上，專案內純 Vue 用到翻譯的部分已涵蓋。接下來，只需要整理出字串表，依循上述步驟即可完成基本的翻譯功能！ 🙌
實作手動切換語言
選定欲新增語言切換功能的頁面，加上以下的程式碼：
並在 <script> 區塊加上下方程式碼：
在 Vue 生命週期的 created 時期，會去抓取使用者瀏覽器設定的語言，如果沒有的話，預設為繁體中文。當使用者手動切換語言時，會觸發 langChange() ，其中設定語言給引入的 i18n 套件，即可平順地切換，不會出現白屏問題。
從繁體中文切到英文，切換畫面截圖如下：
Vuetify i18n 套用
專案中使用 Vuetify <v-data-table>，其中像是 rows per page 這類型內建內容，可用 Vuetify 本身提供的多國語系套件做設定。
🔎 Vuetify 官網：Vuetify Internationalization
套用時，卡了一個抓取瀏覽器語言的判斷。沿用前面設定的程式碼，將 vuetify import 進來。在 i18n.locale=locale，加上語言判斷，這邊用到：
vuetify.framework.lang.current = "zhHant"vuetify 是引用進來時的命名，framework 則是欲改變已存在頁面內容，lang & current 是對應到 vuetify.js 檔案內的設定。
🌏 Let’s go abroad.
