国际化 专业版

INFO

该特性由 Vue I18n 提供技术支持。

如果使用 VSCode 进行开发，推荐安装 i18n Ally Next 扩展。

由于框架采用 Monorepo 架构，为了更好的隔离性，安装该扩展后需在 VSCode 工作区下使用，打开 fantastic-admin.code-workspace 文件，并点击“打开工作区”。

默认语言

点击查看

语言包

框架自身的语言包存放在 apps/<app>/src/locales/lang/ 目录下，如果需要新增某个语言，请在该目录下新建一个 json 文件，文件名为语言代码，比如 ja.json 代表日文，并在 apps/<app>/src/locales/index.ts 里增加：

const localesName: Record<string, any> = {}
for (const key in messages) {
  switch (key) {
    case 'zh-cn':
      localesName[key] = '中文(简体)'
      break
    case 'zh-tw':
      localesName[key] = '中文(繁體)'
      break
    case 'en':
      localesName[key] = 'English'
      break
    case 'ja': 
      localesName[key] = '日本語'
      break
  }
}

如果你使用了三方 UI 组件库，例如 Element Plus 。因为 Element Plus 本身也有自己的语言包，所以在做国际化支持的时候，框架的语言包和 Element Plus 的语言包需要进行数据合并，可点击这里查看 Element Plus 的语言包文件。

假设你已经在 apps/<app>/src/locales/lang/ 目录下新增并配置好了一个日文语言包 ja.json ，然后你需要到 apps/<app>/src/ui/provider/index.ts 文件里做以下调整：

import zhCN from 'element-plus/es/locale/lang/zh-cn.mjs'
import zhTW from 'element-plus/es/locale/lang/zh-tw.mjs'
import en from 'element-plus/es/locale/lang/en.mjs'
import ja from 'element-plus/es/locale/lang/ja.mjs'

// 此处的对象属性和 src/locales/index.ts 中的 messages 对象属性一一对应
const locales: Record<string, any> = {
  'zh-cn': zhCN,
  'zh-tw': zhTW,
  'en': en,
  'ja': ja 
}

路由设置

以中文(简体)为例，打开 apps/<app>/src/locales/lang/zh-cn.json 文件可以看到路由相关的配置，在 route 对象里可以扩展需要开启国际化支持的路由。

{
  "route": {
    "page": "页面标题",
  }
}

如果需要新增某个路由的国际化支持，光设置好中文(简体)的还不行，其它语言包文件里也要同步添加。当都设置好后，可在该路由的 title 参数上直接设置对应 key 值，例如：

meta: {
  title: 'route.page',
},

框架设置

以中文(简体)为例，打开 apps/<app>/src/locales/lang/zh-cn.json 文件可以看到框架相关的配置，在 app 对象里的就是框架部分的语言信息，如果需要对框架进行二次开发，请在这里扩展。

单页组件

如果每个页面都要做国际化支持，那语言包文件就会变得无比庞大且难以维护，推荐在每个页面组件里使用 <i18n> 自定义块进行语言维护，可访问 apps/example/src/views/feature_example/i18n.vue 查看示例。

与服务端交互

所有的请求均会在请求头里带上 Accept-Language ，后端可根据这一状态信息做动态数据国际化处理。

RTL 模式

文字阅读方向由语言信息决定（例如阿拉伯文），所以可以在 apps/<app>/src/locales/index.ts 的 localesInfo 中为对应语言设置 direction: 'rtl' 。

这里作为演示，将中文改为 RTL 模式：

const localesInfo: Record<string, { label: string, direction: 'ltr' | 'rtl' }> = {}
for (const key in messages) {
  switch (key) {
    case 'zh-cn':
      localesInfo[key] = { label: '中文(简体)', direction: 'rtl' }
      break
    case 'zh-tw':
      localesInfo[key] = { label: '中文(繁體)', direction: 'ltr' }
      break
    case 'en':
      localesInfo[key] = { label: 'English', direction: 'ltr' }
      break
  }
}

关闭国际化

如果不想开启国际化，可以关闭语言选择器，并设置默认语言为中文(简体)。

import { setSettings } from '@fantastic-admin/settings'

export default setSettings({
  toolbar: {
    i18n: {
      enable: false,
      defaultLang: 'zh-cn',
    },
  },
})