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的專案中
