Vue 加入多國語言 i18n 套件(Typescript)

Vue 18n packge

I18n (Internationalization， i與n中間有18個字母) 是程式設計在開發過程時將軟體與特定或地區語言解耦和的過程，使軟體更能符合當地的地區文化語言。 網站製作的過程中加入i18n ，更能提升使用者的操作體驗減少使用者語言上的障礙，更能協助推廣網站。vue i18n可以協助在vue開發初期整合多國語言文字的管理， 在網站上架後更能提早觸及更多不同語言的使用者。

安裝vue-i18n

可參考自官方網站 https://vue-i18n.intlify.dev/guide/installation.html

以下使用npm 安裝

npm install vue-i18n@10

設定導入套件 main

以下範例(Typescript)是在安裝後，再main.ts導入I18n

main.ts

// Typescript 
// main.ts
import { createI18n } from "vue-i18n";
const i18n = createI18n({

});
// ...
const app = createApp(App).use(i18n);

// ...

後續再加入不同語言文字的字典檔

修改後的main.ts

import { createI18n } from "vue-i18n";

import { common_dict } from "./locale/dictionary";

const i18n = createI18n({
legacy: false,
locale: "zhTw", // 預設語言
fallbackLocale: "en", // 第二預設語言
messages: dict, 
});

const app = createApp(App).use(i18n);

加入語言範例

這裡示範加入英文及中文的範本檔加客製檔

dictionary.ts(第一層視作共同主要的範本檔)，在第二層可另外再加入視需求的客製檔

import {addtionDictionary} from 'customer/dictionary'
export const dict = {
    en: {
        settings:"Settings",
        dark_theme:"Dark",
        light_theme:"Bright",
        theme_mode:"Theme",
        loading:"Loading",
        hometab:"Home",
        ... addtionDictionary.en,
    },
    zhTw: {
        settings:"設定",
        dark_theme:"暗色",
        light_theme:"明亮",
        theme_mode:"主題模式",
        loading:"載入中",
        hometab:" 主頁",   
        ... addtionDictionary.zhTw,
    }

}

元件引入字典

我們可以先開一個元件檔Test.vue， 讓不同語言環境更換Title的文字

<Title>{{$t("hometab")}}</Title>

加入文字索引

例如範例的"hometab" 已事先在在前一步驟的字典檔分別翻譯為home或主頁。使用時將索引置入$t(...)中

或是想在<script setup>區域使用i18n:

<script setup lang="ts">
import { useI18n } from "vue-i18n";
const i18n = useI18n();
const defaultRoot = i18n.t("hometab");
<script>

以上即以簡單的方式完成加入I18n至Vue的專案中