###### tags: `Vue` 、`前端小天地|JS`

Vue 3 - i18n (國際化多語系)
===
> 這邊紀錄如何在Vue3專案裡使用多語系[color=#9C7DDE]

1. 安裝 **vue-i18n** 套件

:::warning
請注意：v8 目前無支援 vue3，v9 才有支援。
:::

2. 當時安裝版本：`^9.3.0-beta.24`

npm install vue-i18n@next -S

3. **/src/main.js** 寫入以下程式：

:::info
💬 說明
- `zh` 與 zhCustomized 分別是繁體中文基礎檔案 與 繁體中文客製檔案。
- `cn` 是簡體中文基礎檔案。
- `en` 是英文基礎檔案。
- `legacy` 官方文獻提到：您必須設置 **false** 才能使用 Composition API。
- `fallbackLocale` 偏好語言在你提供的翻譯中找不到對應的翻譯內容時，回退語言將會被使用作為替代。
- `zhMerged` 合併繁體中文兩個 json 檔案資料，若key值重複，依後面的為優先 ( , ...zhCustomized ) 。
:::

**main.js**

// i18n
import { createI18n } from "vue-i18n"
import zh from "./language/zh-Hant-TW.json"
import zhCustomized from "./language/zh-Hant-TW-customized.json"
import cn from "./language/zh-CN.json"
import en from "./language/en-US.json"


const zhMerged = { ...zh, ...zhCustomized };

const i18n = createI18n({
    legacy: false,
    locale: localStorage.getItem("locale") ?? zhMerged,
    fallbackLocale: zhMerged,
    messages :{
        "zh-Hant-TW": zhMerged,
        "zh-CN": cn,
        "en-US": en
    }
})

createApp(App).use(i18n).mount('#app')

4. 語系json檔案，繁體中文範例：

{
    "home": "啟程開始",
    "about": "現況分享",
    "portfolio": "參觀作品",
    "skills": "技能列表",
    "contact": "聯絡我"
}

5. 在要使用的SFC`<script>`中，寫入以下程式：

**NavMenu.vue**

<script setup>
    import { useI18n } from "vue-i18n";

    // 多語系
    const languageOptions = ref([
        {
            value: "zh-Hant-TW",
            label: "繁體中文",
        },
        {
            value: "zh-CN",
            label: "简体中文",
        },
        {
            value: "en-US",
            label: "English",
        },
    ]);
    const { t, locale } = useI18n();

    watch(locale, (newlocale) => {
        localStorage.setItem("locale", newlocale);
    });
</script>

<template>
    <el-select v-model="locale" placeholder="......">
        <el-option
        v-for="item in languageOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        </el-option>
    </el-select>
</template>