​
国际化配置

框架内置中文简体、英文两种语言支持。

​
多国语言配置

​
前端配置国际化

页面国际化数据最好放在同级的目录中 i18n 里。/@/i18n 为框架内置，为了更好的升级，建议不要直接修改。

前端国际化目录结构

​
后端配置国际化

与前端 i18n 配置 ts 文件格式相同，i18n 可以通过后台进行国际化管理的配置和使用。

后端国际化配置

​
国际化使用

​
在 Vue 模板中使用

使用 $t('xxx.xxx') 语法：

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

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

​
在 TypeScript 文件中使用

使用 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>

​
框架其它国际化

使用方法参考：国际化 - 国际化使用。需提前定义多国语言数据 message.xxx.xxx

​
菜单国际化

代码位置

/@/layout/navMenu

从 /@/router/route.ts 中的 meta.title 字段获取（message.router.xxx 需提前在 /@/i18n/lang 中定义）：

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

​
浏览器标题国际化

代码位置

/@/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;
  });
}

​
顶栏国际化

代码位置

/@/layout/navBars/breadcrumb

面包屑、组件大小、语言切换、菜单搜索、布局配置、消息、开/关全屏、用户下拉菜单（鼠标放入 icon 图标上会显示图标说明）。

基本都使用 $t(xxx.xxx.xxx) 语法：

<div>{{ $t(v.meta.title) }}</div>

​
布局配置国际化

代码位置

/@/layout/navBars/breadcrumb/setings.vue

国际化数据在 /@/i18n/lang 中的 layout 对象。基本上使用 $t('message.layout.xxx') 语法：

<div class="layout-breadcrumb-seting-bar-flex-label">
  {{ $t('message.layout.twoMenuBar') }}
</div>

​
页面国际化

基本上使用 $t('message.xxx.xxx') 语法。

​
♥️ 获取支持

遇到问题？

如果您在使用过程中遇到任何问题、有功能建议或需求，请点击此卡片前往 Gitee 仓库提交 Issue。