📄 前端国际化配置

国际化配置

框架内置 中文简体、英文

1. 多国语言配置

前端配置国际化

注意：页面国际化数据最好放 同级的目录中 i18n 里。/@/i18n 为框架内置，为了更好的升级，最好别添加到里面

后端配置国际化

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

2. 国际化使用

页面上使用 .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>

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>

框架其它国际化

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

1. 菜单

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

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

3. 顶栏

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

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

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

4. 布局配置

/@/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>

5. 页面

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