tags: Vue 、前端小天地|JS

Vue 3 - i18n (國際化多語系)

這邊紀錄如何在Vue3專案裡使用多語系

1. 安裝 vue-i18n 套件

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

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

npm install vue-i18n@next -S

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

💬 說明

• 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>