umi-ui-i18n 可视化插件可以让您快捷的提炼出项目中设置的中文国际化内容，这样可以让您更方便、更快捷、更高效的设置对应的其他国际化语言。

业务背景

在项目开发周期迭代时，编写多语言都是一件很麻烦的事情，特别是在开发完以后想额外增加另外一种多语言时，都会产生巨大的工作量，同时每个项目中不同模块会存在多个对应自己模块的多语言文件，在修改或者增加过程中，很不方便。所以在此业务背景场景下，我们提炼出umi-ui-i18n插件，它会将您项目中所有的中文国际化内容提取到一个统一文件进行维护，这样可以让您更方便、更快捷、更高效的设置对应的其他国际化语言。

快速集成

我们的插件包现阶段需要nrm源切换到公司指定源进行下载。

检查nrm源链接

  1. nrm ls

设置nrm源为152源

  1. nrm use http://192.168.10.152:7001/

接下来执行以下命令安装插件依赖

  1. npm install @erajs/umi-ui-i18n || yarn add @erajs/umi-ui-i18n

引入配置

需要在项目config目录下的config.js文件中plugins下增加[‘@erajs/umi-ui-i18n’],如：

  1.  plugins: [
  2.     ['@erajs/umi-ui-i18n'],
  3.  ],

启动命令

在项目中执行zebra ui命令即可启动：

  1. zebra ui

可视化使用

初始化导入项目

经过上述命令zebra ui 启动成功以后，您将会看到以下主界面，在右上角您可以点击导入项目来导入您的项目。如下图：
sql1.png

点击打开项目

点击导入项目，导入成功后您就可以在此界面看到您的项目，点击项目进入。如下图：
image.png

多语言功能

当打开项目以后，如果您严格按照上述快速集成二部曲安装依赖、引入配置的话，您可以在可视化工具左侧工具栏中看到一个多语言选择项，点击多语言打开。

基础区域

主区域为项目中提取出来的所有业务模块的多语言中文配置，在右上角有个切换按钮：

  • I：项目中所有多主题模块下i18n模块下的i18n-zh_CN中文配置，在线修改对应英文，点击右侧保存按钮，插件将自动写入对应的i18n-en_US英文配置文件中。
  • M：项目中所有多主题模块下，message-zh_CN中文配置，在线修改对应英文，点击右侧保存按钮，插件将自动写入对应的message-en_US英文配置文件中。

i18n6.png