fix: the translation is incorrect when switching languages for the first time (#4146)

* fix: the translation is incorrect when switching languages for the first time

closes #4138

* chore: merge locale message even if default locale not exist
This commit is contained in:
Li Kui 2024-08-14 05:29:31 +08:00 committed by GitHub
parent 3b0f72330a
commit 6a1e6ad99f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 40 additions and 40 deletions

View File

@ -1,8 +1,13 @@
import type { Locale } from 'vue-i18n';
import type { ImportLocaleFn, SupportedLanguagesType } from './typing';
import type {
ImportLocaleFn,
LoadMessageFn,
LocaleSetupOptions,
SupportedLanguagesType,
} from './typing';
import { unref } from 'vue';
import { type App, unref } from 'vue';
import { createI18n } from 'vue-i18n';
const loadedLanguages = new Set<string>();
@ -18,6 +23,8 @@ const modules = import.meta.glob('./langs/*.json');
const localesMap = loadLocalesMap(modules);
let loadMessages: LoadMessageFn;
/**
* Load locale modules
* @param modules
@ -45,11 +52,28 @@ function setI18nLanguage(locale: Locale) {
document?.querySelector('html')?.setAttribute('lang', locale);
}
async function setupI18n(app: App, options: LocaleSetupOptions = {}) {
const { defaultLocale = 'zh-CN' } = options;
// app可以自行扩展一些第三方库和组件库的国际化
loadMessages = options.loadMessages || (async () => ({}));
app.use(i18n);
await loadLocaleMessages(defaultLocale);
// 在控制台打印警告
i18n.global.setMissingHandler((locale, key) => {
if (options.missingWarn && key.includes('.')) {
console.warn(
`[intlify] Not found '${key}' key in '${locale}' locale messages.`,
);
}
});
}
/**
* Load locale messages
* @param lang
*/
async function loadI18nMessages(lang: SupportedLanguagesType) {
async function loadLocaleMessages(lang: SupportedLanguagesType) {
if (unref(i18n.global.locale) === lang) {
return setI18nLanguage(lang);
}
@ -63,8 +87,12 @@ async function loadI18nMessages(lang: SupportedLanguagesType) {
if (message?.default) {
i18n.global.setLocaleMessage(lang, message.default);
}
const mergeMessage = await loadMessages(lang);
i18n.global.mergeLocaleMessage(lang, mergeMessage);
loadedLanguages.add(lang);
return setI18nLanguage(lang);
}
export { i18n, loadI18nMessages, loadLocalesMap, setI18nLanguage };
export { i18n, loadLocaleMessages, loadLocalesMap, setupI18n };

View File

@ -1,43 +1,15 @@
import type {
ImportLocaleFn,
LoadMessageFn,
LocaleSetupOptions,
SupportedLanguagesType,
} from './typing';
import type { App } from 'vue';
import { i18n, loadI18nMessages, loadLocalesMap } from './i18n';
import { i18n, loadLocaleMessages, loadLocalesMap, setupI18n } from './i18n';
const $t = i18n.global.t;
let loadMessages: LoadMessageFn;
async function loadLocaleMessages(lang: SupportedLanguagesType) {
const mergeMessage = await loadMessages(lang);
await loadI18nMessages(lang);
i18n.global.mergeLocaleMessage(lang, mergeMessage);
}
async function setupI18n(app: App, options: LocaleSetupOptions = {}) {
const { defaultLocale = 'zh-CN' } = options;
// app可以自行扩展一些第三方库和组件库的国际化
loadMessages = options.loadMessages || (async () => ({}));
app.use(i18n);
await loadLocaleMessages(defaultLocale);
// 在控制台打印警告
i18n.global.setMissingHandler((locale, key) => {
if (options.missingWarn && key.includes('.')) {
console.warn(
`[intlify] Not found '${key}' key in '${locale}' locale messages.`,
);
}
});
}
export { $t, i18n, loadLocaleMessages, loadLocalesMap, setupI18n };
export {
type ImportLocaleFn,
type LocaleSetupOptions,
type SupportedLanguagesType,
} from './typing';
export type { CompileError } from '@intlify/core-base';
export { useI18n } from 'vue-i18n';
export type { ImportLocaleFn, LocaleSetupOptions, SupportedLanguagesType };
export type { Locale } from 'vue-i18n';