国际化

介绍

开发不同地区需要的地域语言，就称为 国际化。

Teek 内置了国际化，支持自定义国际化、element-plus 国际化，同时也支持快速取消国际化功能。

使用

国际化使用非常简单，核心的国际化配置在 src/common/languages/locale 目录下：

• zh-CN.ts 是中文配置文件
• en-US.ts 是英文配置文件

配置文件是以 key: value 的形式，Teek 会根据当前的语言去对应的配置文件，根据 key 获取 value 来渲染到页面上。

在 zh-CN.ts 配置：

export default {
  _tabsNav: {
    refresh: "刷新当前标签页",
    closeCurrent: "关闭当前标签页",
    closeLeft: "关闭左侧标签页",
    closeRight: "关闭右侧标签页",
    closeOthers: "关闭其他标签页",
    closeAll: "关闭全部标签页",
  },
};

在 en-US.ts 配置：

export default {
  _tabsNav: {
    refresh: "Refresh Page",
    closeCurrent: "Close Current",
    closeLeft: "Close Left",
    closeRight: "Close Right",
    closeOthers: "Close Others",
    closeAll: "Close All",
  },
};

vue-i18n 使用

可以在组件里的 Template 直接使用 $t 函数：

<template>
  <ul>
    <li>{{ $t("_tabsNav.refresh") }}</li>
    <li>{{ $t("_tabsNav.closeCurrent") }}</li>
    <li>{{ $t("_tabsNav.closeLeft") }}</li>
    <li>{{ $t("_tabsNav.closeRight") }}</li>
    <li>{{ $t("_tabsNav.closeOthers") }}</li>
    <li>{{ $t("_tabsNav.closeAll") }}</li>
  </ul>
</template>

或者手动在 script 引入 t 函数：

<script setup lang="ts">
import { useI18n } from "vue-i18n";

const { t } = useI18n();
</script>

<template>
  <ul>
    <li>{{ t("_tabsNav.refresh") }}</li>
    <li>{{ t("_tabsNav.closeCurrent") }}</li>
    <li>{{ t("_tabsNav.closeLeft") }}</li>
    <li>{{ t("_tabsNav.closeRight") }}</li>
    <li>{{ t("_tabsNav.closeOthers") }}</li>
    <li>{{ t("_tabsNav.closeAll") }}</li>
  </ul>
</template>

最终根据不同的语言来渲染不同的 value。

内置 t 函数使用

除了使用 useI18n 函数外，Teek 还提供了 t 函数来实现国际化。

为什么提供 t 函数呢？

vue-i18n 的 useI18n 函数仅在 vue 组件里使用，无法在 ts 文件里使用，因此就需要 Teek 内置的 t 函数（能在任意文件使用）

提供的 t 函数使用如下：

<script setup lang="ts">
import { t } from "@/common/languages";

console.log(t("_tabsNav.refresh"));
</script>

此外，t 函数还支持传入 动态参数：

假设 zh-CN.ts 有如下配置：

export default {
  _page: {
    pageInfo: "当前页：{pageNum}，总页数：{total}",
  },
};

使用 t 函数传入动态参数：

<script setup lang="ts">
import { t } from "@/common/languages";

// 打印内容：当前页：1，总页数：10
console.log(t("_page.pageInfo", { pageNum: 1, total: 10 }));
</script>

警告

两种方式如果都匹配不到配置文件的 key，则直接返回参数名。如 $t("_tabsNav.more") 会直接渲染 _tabsNav.more。

路由国际化

路由国际化的使用请看 路由国际化。

ElementPlus 国际化

如果你想修改 ElementPlus 的国际化，内容在 src/App.vue 文件下。

<script setup lang="ts" name="App">
import zhCn from "element-plus/es/locale/lang/zh-cn";
import en from "element-plus/es/locale/lang/en";
import { useLayoutStore } from "./stores/layout";

const layoutStore = useLayoutStore();
const { language } = storeToRefs(layoutStore);

// element 语言配置
const i18nLocale = computed(() => {
  if (language.value === LanguageEnum.ZhCn) return zhCn;
  if (language.value === LanguageEnum.EnUs) return en;
  return document.documentElement.lang === "zh-CN" ? zhCn : en;
});
</script>

<template>
  <el-config-provider :locale="i18nLocale"></el-config-provider>
</template>

layoutStore 是 Pinia 状态管理，缓存了当前国际化语言。

新增多语言

• 在 src/common/languages/locale 目录下新增一个多语言文件
• 在 src/common/enums 的 LanguageEnum 中添加多语言枚举值
• 在 src/common/languages/index.ts 的 message 注册多语言文件，然后在 languageOptions 中添加多语言选项