国际化

配置

多语言配置文件在 locales 目录下，文件名格式为 {language}.json, 在src\modules\i18n.ts中添加语言

TIP

非json格式无法配合I18N-Ally插件使用，请使用json格式

import { createI18n } from 'vue-i18n'
import type { App } from 'vue'
import enUS from '../../locales/en_US.json'
import zhCN from '../../locales/zh_CN.json'
import { local } from '@/utils'

export const i18n = createI18n({
  legacy: false,
  locale: local.get('lang') || 'zhCN', // 默认显示语言
  fallbackLocale: 'enUS',
  messages: {
    zhCN,
    enUS,
  },
})

export function install(app: App) {
  app.use(i18n)
}

组件库的多语言配置在 src\utils\i18n.ts 文件下，将你需要的语言添加到里面，在项目中会自动切换。NaiveUI的国际化说明

import { dateZhCN, zhCN } from 'naive-ui'

export const naiveI18nOptions: Record<App.lang, { locale: NLocale | null, dateLocale: NDateLocale | null }> = {
  zhCN: {
    locale: zhCN,
    dateLocale: dateZhCN,
  },
  enUS: {
    locale: null,
    dateLocale: null,
  },
}

vue文件

可以在模板中直接使用$t方法，例如

<span>{{ $t('app.backTop') }}</span>

使用useI18n来在setup中使用

const { t } = useI18n()

const transitionSelectorOptions = computed(() => {
  return [
    {
      label: t('app.transitionNull'),
      value: '',
    }
  ]
})

WARNING

使用变量来渲染组件的情况下，变量需要包裹在computed中，否则无法生效

ts文件

在ts/js文件中，无法使用上述的方法来获得翻译文本，所以需要使用src\utils\i18n.ts中$t工具方法，例如

import { $t } from '@/utils'

const label = $t('app.backTop')

切换语言

需要使用src\utils\i18n.ts中setLocale工具方法，例如

import { setLocale } from '@/utils'

setLocale('en')

菜单和路由

首先你需要在多语言配置文件中添加菜单和路由的翻译文本，格式如下

{
  "route": {
    "{your route name}": "{your route i18n text}",
  }
}

在配置文件中，key和你的路由name一致，value是你的路由i18n文本，例如

route

{
    'name': 'workbench',
    'path': '/dashboard/workbench',
    'title': '工作台',
    'requiresAuth': true,
    'icon': 'icon-park-outline:alarm',
    'pinTab': true,
    'menuType': 'page',
    'componentPath': '/dashboard/workbench/index.vue',
    'id': 2,
    'pid': 1,
  },

locale

{
  "route": {
    "workbench": "工作台",
  }
}

如果你没有设置这个路由的i18n文本，那么这个路由将会使用title作为显示的文本