diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts index 983fdd7..781303e 100644 --- a/src/utils/i18n.ts +++ b/src/utils/i18n.ts @@ -3,10 +3,13 @@ import enUS from 'vant/es/locale/lang/en-US' import zhCN from 'vant/es/locale/lang/zh-CN' import { Locale, type PickerColumn } from 'vant' -/** 默认语言包名称 */ const FALLBACK_LOCALE = 'zh-CN' -/** 多语言 picker columns */ +const vantLocales = { + 'zh-CN': zhCN, + 'en-US': enUS, +} + export const languageColumns: PickerColumn = [ { text: '简体中文', value: 'zh-CN' }, { text: 'English', value: 'en-US' }, @@ -15,7 +18,6 @@ export const languageColumns: PickerColumn = [ export const i18n = setupI18n() type I18n = typeof i18n -/** 当前语言 */ export const locale = computed({ get() { return i18n.global.locale.value @@ -25,14 +27,6 @@ export const locale = computed({ }, }) -// 载入 vant 语言包 -Locale.use('zh-CN', zhCN) -Locale.use('en-US', enUS) - -// 根据当前语言切换 vant 语言包 -Locale.use(locale.value) - -/** 初始化 i18n */ function setupI18n() { const locale = getI18nLocale() const i18n = createI18n({ @@ -45,25 +39,32 @@ function setupI18n() { async function setLang(lang: string, i18n: I18n) { await loadLocaleMsg(lang, i18n) + document.querySelector('html').setAttribute('lang', lang) localStorage.setItem('language', lang) i18n.global.locale.value = lang - Locale.use(lang) + + // 设置 vant 组件语言包 + Locale.use(lang, vantLocales[lang]) } -/** 加载语言包 */ +// 加载本地语言包 async function loadLocaleMsg(locale: string, i18n: I18n) { const messages = await import(`../locales/${locale}.json`) i18n.global.setLocaleMessage(locale, messages.default) } -/** 获取当前语言对应的语言包名称 */ +// 获取当前语言对应的语言包名称 function getI18nLocale() { const storedLocale = localStorage.getItem('language') || navigator.language const langs = languageColumns.map(v => v.value as string) - const foundLocale = langs.find(v => v === storedLocale || v.indexOf(storedLocale) === 0) // 存在当前语言的语言包 或 存在当前语言的任意地区的语言包 - const locale = foundLocale || FALLBACK_LOCALE // 若未找到,则使用 默认语言包 + + // 存在当前语言的语言包 或 存在当前语言的任意地区的语言包 + const foundLocale = langs.find(v => v === storedLocale || v.indexOf(storedLocale) === 0) + + // 若未找到,则使用 默认语言包 + const locale = foundLocale || FALLBACK_LOCALE return locale }