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

packages/locales/src/i18n.ts

@@ -1,8 +1,13 @@
 import type { Locale } from 'vue-i18n';
 
-import type { ImportLocaleFn, SupportedLanguagesType } from './typing';
-
-import { unref } from 'vue';
+import type {
+  ImportLocaleFn,
+  LoadMessageFn,
+  LocaleSetupOptions,
+  SupportedLanguagesType,
+} from './typing';
+
+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 };

packages/locales/src/index.ts

@@ -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';