@jdlinker/system/src/locales/setupI18n.ts

jdLinker 系统模块

import { createI18n } from 'vue-i18n';
import type { I18n, I18nOptions } from 'vue-i18n';
import { setHtmlPageLang, setLoadLocalePool } from './helper';
import { useLocaleStoreWithOut, localeSetting } from '@jdlinker/func';
import { ref, watch } from 'vue';

const { fallback, availableLocales } = localeSetting;
export let i18n: ReturnType<typeof createI18n>;

export function useI18n() {
  return i18n?.global;
}

/**
 * 监听国际化
 * @returns
 */
export function watchI18n() {
  console.log('watchI18n....');
  const getAntdLocale = function () {
    // @ts-ignore
    return i18n.global.getLocaleMessage(i18n.global.locale)?.antdLocale ?? {};
  };
  // 国际化处理
  const locale = ref();
  watch(
    () => i18n.global.locale,
    () => {
      locale.value = getAntdLocale();
    },
    { immediate: true }
  );
  return { locale };
}

async function createI18nOptions(): Promise<I18nOptions> {
  console.log('createI18nOptions...');
  const localeStore = useLocaleStoreWithOut();
  const locale = localeStore.getLocale;
  const defaultLocal = await import(/* @vite-ignore */ `./lang/${locale}.ts`);
  // const defaultLocal = locale === 'zh_CN' ? zh_CN : en;
  const message = defaultLocal.default?.message ?? {};

  setHtmlPageLang(locale);
  setLoadLocalePool((loadLocalePool) => {
    loadLocalePool.push(locale);
  });

  return {
    legacy: false,
    locale,
    fallbackLocale: fallback,
    messages: {
      [locale]: message
    },
    availableLocales: availableLocales,
    sync: true, //If you don’t want to inherit locale from global scope, you need to set sync of i18n component option to false.
    silentTranslationWarn: true, // true - warning off
    missingWarn: false,
    silentFallbackWarn: true
  };
}

/**
 * 安装i18n
 *
 * @export
 * @param {App} app
 */
export async function setupI18n(app) {
  console.log('setupI18n....');
  const localeStore = useLocaleStoreWithOut();
  const locale = localeStore.getLocale;
  setHtmlPageLang(locale);
  setLoadLocalePool((loadLocalePool) => {
    loadLocalePool.push(locale);
  });

  const options = await createI18nOptions();
  i18n = createI18n(options) as I18n;
  await changeI18n(locale);
  app.use(i18n);
  watch(() => localeStore.getLocale, changeI18n);
}

/**
 * 切换语言
 *
 * @export
 * @param {*} lang
 */
export async function changeI18n(lang) {
  const globalStore = useLocaleStoreWithOut();
  lang = lang ?? globalStore.getLocale;
  const messages = await loadI18n(lang);
  i18n.global.setLocaleMessage(lang, messages);
  i18n.global.locale = lang;
}

/**
 * 加载语言文件
 *
 * @param {*} lang
 * @return {*}
 */
const loadI18n = async function (lang) {
  console.log('loadI18n....');
  // const messages = lang === 'zh_CN' ? zh_CN : en;
  const defaultLocal = await import(/* @vite-ignore */ `./lang/${lang}.ts`);
  // @ts-ignore
  return defaultLocal.default?.message ?? {};
};

// 为什么要编写此函数？
// 主要用于配合vscode i18nn ally插件。此功能仅用于路由和菜单。请在其他地方使用useI18n
export const t = (key) => key;