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; 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 { 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;