globalization

If you use vscode development tools, it is recommended to install I18n-ally this plugin

I18n-ally plugin

After installing the plugin, you can see the corresponding language content in real time in your code

Configure the default language

The default language can be configured in src/settings/localeSetting.ts

export const LOCALE: { [key: string]: LocaleType } = {
  ZH_CN: "zh_CN",
  EN_US: "en",
};

export const localeSetting: LocaleSetting = {
  // Whether to display the language selector
  showPicker: true,
  // Current language
  locale: LOCALE.ZH_CN,
  // Default language
  fallback: LOCALE.ZH_CN,
  // Allowed languages
  availableLocales: [LOCALE.ZH_CN, LOCALE.EN_US],
};

// Configure language list
export const localeList: DropMenu[] = [
  {
    text: "简体中文",
    event: "zh_CN",
  },
  {
    text: "English",
    event: "en",
  },
];

configuration

The i18n introduced in src/locales/setupI18n.ts does not need to be modified

Language files

Specific language can be configured in src/locales/lang/

# locales/lang/

# Chinese language
zh_CN:
   component: component related
   layout: layout related
   routes: related to the routing menu
   sys: system page related

en: ditto

Language import logic description

1. Initialization

The root language file in src/locales/setupI18n can be seen

const defaultLocal = await import(`./lang/${locale}.ts`);

This will import the src/locales/lang/{lang}.ts file language pack, which will import all files under the corresponding language.

import { genMessage } from "../helper";
import antdLocale from "ant-design-vue/es/locale/zh_CN";
import momentLocale from "moment/dist/locale/zh-cn";

const modules = import.meta.globEager("./zh_CN/**/*.ts");
export default {
  message: {
    ...genMessage(modules, "zh_CN"),
    antdLocale,
  },
  momentLocale,
  momentLocaleName: "zh-cn",
};

And convert it into a multi-level structure according to the corresponding directory structure.

Example:

The content of the lang/zh_CN/components/modal.ts file is

{
  title: "Title";
}

Then when using it, directly use t('components.modal.title') to get it.

The advantage of this is that it is easier to manage the multilingualism of large projects. If you don't need to divide by module, you can directly import it manually.

Use

Introduce the project's own useI18n Note not to introduce vue-i18n's useI18n

import { useI18n } from "/@/hooks/web/useI18n";

const { t } = useI18n();

const title = t("components.modal.title");

Switch languages

To switch languages, you need to use src/locales/useLocale.ts

import { useLocale } from "/@/locales/useLocale";

const { changeLocale } = useLocale();

changeLocale("en");

Add

Language file

Add the corresponding language file in src/locales/lang/

Add language

Currently, the project comes with only two languages: zh_CN and en

If you need to add more, follow these steps:

1. Add the corresponding language directory and language file in src/locales/lang/ and import ant-design-vue and moment corresponding language packages
2. Add preview type definition in types/config.d.ts
3. Modify language configuration in src/settings/localeSetting.ts

Read language data remotely

Currently, the project will wait for the setupI18n function to execute before rendering the interface in src/main.ts, so just send an ajax request in setupI18n and set the corresponding data to the i18n instance.

// src/main.ts
await setupI18n(app);

app.mount("#app", true);

setupI18n function

Code: src/locales/setupI18n/

As shown below, a default language will be set here first. The default language can be set locally, or you can wait for the interface to return to the default language here.

// setup i18n instance with glob
export async function setupI18n(app: App) {
  const options = await createI18nOptions();
  i18n = createI18n(options) as I18n;
  app.use(i18n);
}

async function createI18nOptions(): Promise<I18nOptions> {
  const locale = localeStore.getLocale;

  // 这里改成接口获取
  const defaultLocal = await import(`./lang/${locale}.ts`);
  const message = defaultLocal.default?.message ?? {};

  return {
    legacy: false,
    locale,
    fallbackLocale: fallback,
    messages: {
      [locale]: message,
    },
    availableLocales: availableLocales,
    sync: true,
    silentTranslationWarn: true,
    missingWarn: false,
    silentFallbackWarn: true,
  };
}

changeLocale function

Code: src/locales/useLocale/

When manually switching the language, the useLocale function will be triggered. useLocale is also an asynchronous function, just wait for the interface to return the response data, and then set it

async function changeLocale(locale: LocaleType) {
  const globalI18n = i18n.global;
  const currentLocale = unref(globalI18n.locale);
  if (currentLocale === locale) return locale;

  if (loadLocalePool.includes(locale)) {
    setI18nLanguage(locale);
    return locale;
  }
  // 这里改成接口获取
  const langModule = ((await import(`./lang/${locale}.ts`)) as any)
    .default as LangModule;
  if (!langModule) return;

  const { message, momentLocale, momentLocaleName } = langModule;

  globalI18n.setLocaleMessage(locale, message);
  moment.updateLocale(momentLocaleName, momentLocale);
  loadLocalePool.push(locale);

  setI18nLanguage(locale);
  return locale;
}