auth-web/src/App.vue

<template>
	<el-config-provider :locale="currentLocale">
		<router-view />
		<ReDialog />
	</el-config-provider>
</template>

<script lang="ts" setup>
import { ElConfigProvider } from 'element-plus';
import { computed, onMounted } from 'vue';
import { ReDialog } from '@/components/BaseDialog';
import en from 'element-plus/es/locale/lang/en';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import plusEn from 'plus-pro-components/es/locale/lang/en';
import plusZhCn from 'plus-pro-components/es/locale/lang/zh-cn';
import { useNav } from '@/layout/hooks/useNav';
import { useI18n } from 'vue-i18n';
import { userI18nStore } from '@/store/i18n/i18n';

const i18nStore = userI18nStore();
const i18n = useI18n();
const { $storage } = useNav();

/**
 * * 设置多语言内容
 */
const setI18n = async () => {
	await i18nStore.fetchI18n();
	const languageData = JSON.parse(localStorage.getItem('i18nStore') as any);
	// 初始化设置多语言内容
	const locale = $storage.locale.locale;
	// 如果本地没有语言版本，设置为服务端默认内容
	if (locale == '' || locale == null || !locale) {
		const local = languageData.i18n.local;
		i18n.locale.value = local;
		$storage.locale = { locale: local };
		i18n.mergeLocaleMessage(local, languageData.i18n[local]);
		return;
	}

	i18n.locale.value = locale;
	$storage.locale = { locale };
	i18nStore.i18n.local = locale;
	i18n.mergeLocaleMessage(locale, languageData.i18n[locale]);
};

/**
 * * 当前语言类别
 */
const currentLocale = computed(() => {
	const languageData = JSON.parse(localStorage.getItem('i18nStore') as any);
	const local = languageData ? languageData.i18n.local : {};
	return local === 'zh' ? { ...zhCn, ...plusZhCn } : { ...plusEn, ...en };
});

onMounted(() => {
	// 设置多语言
	setI18n();
});
</script>