摸鱼低代码 mfish-nocode

切换深浅模式

当前页

国际化 ​

提示

后端返回的菜单名称暂时不支持国际化，根据配置的名称语言类型显示

配置默认语言 ​

在 src/settings/I18nSetting.ts 内可以配置默认语言

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

export const localeSetting: LocaleSetting = {
  // 是否显示语言选择器
  showPicker: true,
  // 当前语言
  locale: LOCALE.ZH_CN,
  // 默认语言
  fallback: LOCALE.ZH_CN,
  // 允许的语言
  availableLocales: [LOCALE.ZH_CN, LOCALE.EN_US],
};

// 配置语言列表
export const localeList: DropMenu[] = [
  {
    text: '简体中文',
    event: 'zh_CN',
  },
  {
    text: 'English',
    event: 'en',
  },
];

配置 ​

在 src/i18n/SetupI18n.ts 内引入的 i18n 这个无需修改

语言文件 ​

在 src/i18n/lang/ 可以配置具体的语言

bash
# locales/lang/

# 中文语言
zh_CN:
  component: 组件相关
  layout: 布局相关
  routes: 路由菜单相关
  sys: 系统页面相关

en: 同上

语言导入逻辑说明 ​

  1. 初始化

在 src/i18n/SetupI18n 内的根语言文件可以看到

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

这会导入 src/i18n/lang/{lang}.ts 文件语言包，此文件会导入对应语言下的所有文件。

ts
import { genMessage } from "../Helper";
import antdLocale from "ant-design-vue/es/locale/zh_CN";

const modules = import.meta.glob("./zh-CN/**/*.ts", { eager: true });

export default {
    message: {
        ...genMessage(modules, "zh-CN"),
        antdLocale
    }
};

并将其按相应的目录结构转化为多层级的

例:

lang/zh_CN/Components.ts 的文件内容为

ts
export default {
    app: {
        searchNotData: '暂无搜索结果'
    }
}

则在使用的使用直接使用 t('components.app.searchNotData') 进行获取。

这样做的好处在于更容易管理大型项目的多语言。如果不需要分模块划分，可以直接自己手动导入即可。

使用 ​

引入项目自带的 useI18n 注意不要引入 vue-i18n 的 useI18n

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

const { t } = useI18n();

const title = t('components.app.searchNotData');

切换语言 ​

切换语言需要使用 src/i18n/UseLocale.ts

ts
import { useLocale } from "/@/i18n/UseLocale";

const { changeLocale } = useLocale();

changeLocale('en');

新增 ​

语言文件 ​

在 src/i18n/lang/ 增加对应语言的文件即可

新增语言 ​

目前项目自带的语言只有 zh_CN 和 en 两种

如果需要新增，按以下操作即可

  1. 在 src/i18n/lang/ 下新增相应的语言目录及语言文件并引入 引入 ant-design-vue 和 moment 对应的语言包
  2. 在 types/config.d.ts 内加上预览类型定义
  3. 在 src/settings/I18nSetting.ts 修改语言配置

远程读取语言数据 ​

目前项目会在 src/main.ts 内等待 setLocal 这个函数执行完之后才会渲染界面，所以只需在 setupI18n 内发送 ajax 请求，将对应的数据设置到 i18n 实例上即可

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

app.mount('#app');

setupI18n 函数 ​

代码: src/i18n/SetupI18n/

如下所示，这里会先设置一个默认语言，默认语言可以设置在本地，也可以在这里等待接口返回默认语言

ts
async function createI18nOptions(): Promise<I18nOptions> {
    const localeStore = useLocaleStoreWithOut();
    const locale = localeStore.getLocale;
    // 这里改成接口获取
    const defaultLocal = await import(`./lang/${locale}.ts`);
    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
    };
}
// setup i18n instance with glob
async function setupI18n(app: App) {
    const options = await createI18nOptions();
    i18n = createI18n(options) as I18n;
    app.use(i18n);
}

export async function setLocal(app: App) {
    await setupI18n(app);
    const localeStore = useLocaleStore();
    // init store
    localeStore.initLocale();
}

changeLocale 函数 ​

代码: src/locales/useLocale/

当手动切换语言的时候会触发 useLocale 函数，useLocale 也是异步函数，只需等待接口返回响应的数据后，再进行设置即可

ts
// 切换语言将更改useI18n的区域设置并提交配置修改
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 } = langModule;
    globalI18n.setLocaleMessage(locale, message);
    loadLocalePool.push(locale);
    setI18nLanguage(locale);
    return locale;
}