跳到主要内容

国际化

介绍​

当应用需要进行国际化时，通常需要分为以下三个部分：

  • 前端应用的国际化
  • function 模块中函数执行过程中的国际化
  • manifest 文件中各个模块标题的国际化

以上三个部分的国际化翻译文件都应该放在一个 locales 文件夹中，该文件夹应该位于应用代码的根目录下，并按照以下目录结构进行组织：

├── locales
    ├── en
    │   └── index.json
    ├── index.js
    └── zh
        └── index.json
提示

打包构建时，需要将locales文件夹打包到应用包里，需要在package.json的build-package命令中添加-c locales

$ giteeteam-apps build --prod -c locales

前端国际化配置​

  1. 安装依赖：
$ yarn add @alienfast/i18next-loader -D
$ yarn add rosetta
  1. 配置webpack loader
rules: [
    {
        test: /locales/,
        loader: "@alienfast/i18next-loader",
        options: {
            include: ["**/index.json"]
        }
    },
],
  1. 使用

配合rosetta进行使用，请参考：I18n Demo

函数使用国际化​

在函数中使用@giteeteam/apps-team-api中的i18napi，即可实现国际化

import { i18n } from '@giteeteam/apps-team-api'

export const run = async () => {
    console.log(i18n.t('key'));
    return i18n.t('profile.name');
}

可以参考：I18n Demo

manifest国际化​

只能对manifest文件中的title字段进行国际化。

例如在manifest文件中，有如下配置：

manifest.yml
modules:
  itemPanel:
    - key: test-manager-test-detail
      resource: main
      title: panel.title
      loadType: Micro
      route: /panelModule

其中title的panel.title对应locales/zh/index.json中的翻译

locales/zh/index.json
{
  "panel": {
    "title": "测试管理"
  }
}