ece.suwa3d.com/src/App.vue

<script setup lang="ts">
import { useTranslation } from "i18next-vue";
import * as i18n from '@/lang/utils'
import { Locale } from 'vant';
// 引入英文语言包
import enUS from 'vant/es/locale/lang/en-US';
import zhCN from 'vant/es/locale/lang/zh-CN';
import zhTW from 'vant/es/locale/lang/zh-TW';
import ko from 'vant/es/locale/lang/ko-KR';
// import { zhCN } from "element-plus/es/locale";

const { i18next, t } = useTranslation();
i18n.set(t);

// 根据 i18next 语言获取对应的 Vant Locale
function getVantLocale() {
	const lang = i18next.language || "zh-CN";
	switch (lang) {
		case "zh-CN":
			return zhCN;
		case "en":
		case "en-US":
			return enUS;
		case "zh-TW":
		case "zh-HK":
			return zhTW;
		case "ko":
		case "ko-KR":
			return ko;
		default:
			return zhCN; // 默认使用简体中文
	}
}

// 更新 Vant Locale
function updateVantLocale() {
	const lang = i18next.language || "zh-CN";
	const vantLocale = getVantLocale();
	Locale.use(lang, vantLocale);
	console.log("语言已切换为:", lang);
}

// 监听 i18next 语言变化，自动更新 Vant Locale
watch(
	() => i18next.language,
	(newLang: string) => {
		if (newLang) {
			updateVantLocale();
		}
	},
	{ immediate: true }
);

// 组件挂载时初始化 Vant Locale
onMounted(() => {
	// i18next 会自动检测浏览器语言，这里只需要确保 Vant Locale 同步
	updateVantLocale();
});

</script>

<template>
    <router-view v-slot="{ Component }">
        <Suspense>
            <div>
                <component :is="Component" />
            </div>
        </Suspense>
    </router-view>
</template>