Meadmin-template

国际化

设置语言列表

在配置文件@/config/locale.ts设置语言选项，新增成功后localeList里面的text会展示在语言切换的下拉列表中,如果localeList只有一个元素则不会展示切换语言按钮

注意

locale命名时需要和element-plusopen in new window的local命名一致，否则无法加载element-plus对应的语言包

export const localeList = [
  {
    text: '简体中文',
    locale: 'zh-cn',
  },
  {
    text: '美国英语',
    locale: 'en',
  },
]

设置默认语言

修改配置文件@/config/locale.ts中的localeSetting.locale的值为localeList任一元素的locale来配置初始语言

全局语言包

添加全局语言包

全局语言包位于@/locales/lang文件夹下，下面以新建en对应语言包为例：

  • 在@/locales/lang文件夹下新建文件夹en(文件夹名要和locale名称一致)
  cd ./locales/lang
  mkdir en
  • 在@/locales/lang/en文件夹中新建index.ts文件并写入以下代码
import { forOwn } from 'lodash-es';
const modules = import.meta.glob('./**/*.{json,ts}', { eager: true, import: 'default' });
const langs = {} as Record<string, string>;
forOwn(modules, (value) => {
  Object.assign(langs, value);
});
export default langs;
  • 在@/locales/lang/en文件夹下新建任意json/ts语言包文件,语言系统会自动加载

注意

  • 非必要优先使用json格式语言包(有利于自行修改为VueI18nPlugin生成预加载包)。

//@/locales/lang/en/menu.json

{
  "首页": "Index",
  "示例": "Example",
  "权限": "Permission",
  "组件语言包": "Component Language Pack",
  "请求示例": "Request Example",
  "页面权限": "Page Permission",
  "多级菜单": "Multilevel Menu",
  "多级菜单1": "Multilevel Menu 1",
  "多级菜单1-1": "Multilevel Menu 1-1",
  "多级菜单1-1-1": "Multilevel Menu 1-1-1",
  "多级菜单1-2": "Multilevel Menu 1-2"
}

template中按vue-i18n v9.xopen in new window规范使用

<template>
  <div>
    {{ $t('多级菜单1') }}
    <br />
    {{ $t('权限') }}
  </div>
</template>

组件语言包

添加组件语言包

假设组件目录结构如下

├── componentLang 组件文件夹
│   └── index.vue 组件vue文件
  • 在componentLang文件夹下新建组件语言包文件夹lang(组件语言包文件夹名必须为lang)
 mkdir lang
  • 在componentLang/lang文件夹下建立对应语言json/ts文件，文件名和localeList里面的local值相同,以en语言举例

注意

  • 非必要优先使用json格式语言包(有利于自行修改为VueI18nPlugin生成预加载包)。
  touch en.json
  • 在语言文件中写入翻译内容
{
  "切换语言查看效果": "Switch languages to see the effect",
  "打开Network可以看到语言包请求": "Open Network to see the language pack request"
}

使用组件语言包

  • 引入

    直接利用顶层setup异步能力，await loadRes即可。

    注意

    • [(locale: string) => import(./lang/${locale}.json), 'compnentLang'] 中的 compnentLang为组件语言包的缓存名称，确保同一语言(locale)下每个组件语言包一一对应，compnentLang 参数可忽略。
    <script setup lang="ts">
import { useLocalesI18n } from '@/locales/i18n';
const { t, loadRes }  = useLocalesI18n({}, [(locale: string) => import(`./lang/${locale}.json`), 'compnentLang']);
await loadRes;//顶层异步加载语言包
</script>

  • template中按vue-i18n v9.xopen in new window规范使用即可

<template>
  <div class="component-lang">
    {{ t('切换语言查看效果') }}
    <br />
    {{ t('打开Network可以看到语言包请求') }}
  </div>
</template>

优化建议

  • 建议翻译key值为初始化语言的值，这样能节省对应语言包的编写。
  • 如果您的语言包数据不大或用不到多语言建议将翻译全部放在全局语言包中，在配置文件@/config/locale.ts中设置loadMessageConfig.componentLoad的值为false,以避免切换路由时的语言包请求，优化性能。