国际化

框架内置 中文简体、英文、中文繁体

1. ConfigProvider 配置

• ConfigProvider：/@/App.vue ;
• 使用 el-config-provider 包裹路由视图主出口;
• ElementPlus 还提供了一个 Vue 组件 ConfigProvider 用于全局配置国际化的设置。

<!-- getGlobalI18n 为字符串：zh-cn 简体中文，en English，zh-tw 繁體中文
前提是在 main.ts 中引入了 app.use(i18n) -->
<el-config-provider :locale="getGlobalI18n">
  <router-view />
</el-config-provider>

2. 全局配置

ElementPlus 提供了全局配置国际化的设置。

默认中文： main.ts 配置。

import ElementPlus from "element-plus";
import zhCn from "element-plus/es/locale/lang/zh-cn";

app.use(ElementPlus, {
  locale: zhCn,
});

3. 多国语言配置

注意：页面国际化数据最好放 pages 里。lang 为框架内置，为了更好的升级，最好别添加到里面

├── src/i18n
    ├── lang (框架内置国际化)
    │   ├── en.ts (英文)
    │   ├── zh-cn.ts (中文简体)
    │   └── zh-tw.ts (中文繁体)
    │
    ├── pages (页面国际化模拟数据)
    │
    └── index.ts (国际化出口)

• /@/i18n/index.ts 配置多国语言，支持自动引入。

直接复制 pages 目录下的其中一个文件夹，然后改名，里面的变量字段不要重名，否则后自动引入的将覆盖前面相同的变量名

// 对自动引入的 modules 进行分类 en、zh-cn、zh-tw
// https://vitejs.cn/vite3-cn/guide/features.html#glob-import
for (const path in modules) {
  const key = path.match(/(\S+)\/(\S+).ts/);
  if (itemize[key![2]]) itemize[key![2]].push(modules[path].default);
  else itemize[key![2]] = modules[path];
}

• 多国语言初始化，注意 element plus 字段语言不要放入到 message 字段里。message 字段为自定义多国语言。

// 处理最终格式
for (const key in itemize) {
  messages[key] = {
    name: key,
    el: element[key].el,
    message: mergeArrObj(itemize, key),
  };
}

• main.ts 中引用

import { i18n } from "/@/i18n/index";

app.use(i18n);

4. 国际化使用

页面上使用 .vue，$t('message.xxx.xxx')

<el-button>
  <span>{{ $t('message.account.accountBtnText') }}</span>
</el-button>

<el-divider content-position="left">
  {{ $t('message.layout.oneTitle') }}
</el-divider>

ts 上使用 .ts，i18n.global.t(xxx)

import { i18n } from "/@/i18n/index";

const webTitle = i18n.global.t(router.currentRoute.value.meta.title as any);

setup 里使用 ，t(xxx)

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

export default defineComponent({
  name: 'xxx',
  setup() {
    const { t } = useI18n();

    // 使用，xxx 为变量
    t(xxx)
  }
})
</script>

5. 国际化切换

代码位置：/@/layout/navBars/breadcrumb/user.vue

// 语言切换
const onLanguageChange = (lang: string) => {
  locale.value = lang;
};

6. 国际化使用

TIP

1. 需提前在/@/i18n/lang定义多国语言数据 message.xxx.xxx
2. ts中使用

import { useI18n } from 'vue-i18n';
// 定义变量内容
const { t } = useI18n();
// 获取
const signInText = t('message.signInText');

3. html中使用

<span>{{ $t(val.meta.title) }}</span>

1. 菜单

• 路由菜单中的 meta.title 字段（message.router.xxx ）中定义
• 调用语法

<span>{{ $t(val.meta.title) }}</span>

2. 浏览器标题

utils/other.ts useTitle 方法，使用时：other.useTitle()

/**
 * 设置浏览器标题国际化
 * @method const title = useTitle(); ==> title()
 */
export function useTitle() {
  const stores = useThemeConfig(pinia);
  const { themeConfig } = storeToRefs(stores);
  nextTick(() => {
    let webTitle = "";
    let globalTitle: string = themeConfig.value.globalTitle;
    const { path, meta } = router.currentRoute.value;
    if (path === "/login") {
      webTitle = <string>meta.title;
    } else {
      webTitle = setTagsViewNameI18n(router.currentRoute.value);
    }
    document.title = `${webTitle} - ${globalTitle}` || globalTitle;
  });
}