「SDUDOC」前端多语言国际化实现

SDUDOC实训记录 山东大学创新实训记录

多语言的配置

对原engine解耦重构，抽离出国际化多语言模块并集成在前端框架内，实现动态强拓展的多语言国际化文案支持。

首先，使用npm run dev启动调试模式，是umi配置的变更能够动态生效；

在 .umirc.ts 中，配置locale属性使react-intl国际化多语言插件生效：

import {
    defineConfig } from 'umi';

export default defineConfig({
   
  ...otherOptions,
  locale: {
    default: 'zh-CN', antd: true },
});

然后，在src/locales目录下创建多语言文案，命名方式使用<lang><分割符（通过 baseSeparator 配置）><国家或地区>.ts

该文件导出一个key和value都是string类型的对象，也就是说每一项都是一个词条，value为该词条对应语言的文案。

key推荐命名为页面.语义化词条名，方便与不同页面做隔离。同时，文案中支持插入变量，例如'index.formatMsg': '你好, { userName }'，在引用时给第二个参数填入{ userName:'CrazyHer' }即可实现输出你好, CrazyHer的变量格式化替换的效果。zh-CN.ts文案文件示例如下：

export default {
   
  'index.appName': '数字古籍存档与编辑平台',
  'index.appDesc1': '打造古籍研究新模式，',
  'index.appDesc2': '助力古籍资源传承与维护',
  'index.loginOrReg': '登录/注册',
  'index.productBreif': '产品概要',
  'index.docUpload': '古籍上传',
  'index.docUploadDesc': '支持pdf、jpg、png等多种形式上传',
  'index.visualEdit': '可视化编辑',
  'index.visualEditDesc': '小白友好型编辑器，自由拖拉拽，所见即所得',
  'index.coWork': '多人协作',
  'index.coWorkDesc':
    '基于websocket的实时同步数据库PunchDB，实现毫秒级实时多人协作。',
  'index.specialInputMethod': '特色功能——古文字输入法',
  'index.specialInputMethod1':
    '为解决古籍中特殊汉字的出现，设计web输入法。无需下载，sdudoc维护一个公共的字库',
  'index.specialInputMethod2':
    '用户可以自发的创造特殊文字，支持对特殊的汉字进行编辑。',
  'index.appliedTech': '应用技术',
  'index.appliedTechDesc': '分布式架构与图编辑器引擎',
  'index.engine': '古籍编辑引擎',
  'index.engineDesc': '基于服务器-浏览器架构，轻量级Web应用',
  'index.inputMethod': '古文字输入法'