# 一、背景

随着经济全球化的深入，许多中国品牌纷纷开始在海外市场开疆扩土。实现全球化意味着你的产品或者应用需要能够在全球各地的语言环境使用，我们在进行海外业务的推进时，需要面对的最大挑战就是多语言问题。实现好多语言系统的本地化，更方便快捷的修改多语言文案能让你的产品在各个国家地区里有更强的产品竞争力和更好的用户体验以及更低的维护成本。以此为目标，在vivo外销项目的发展过程中我们经过多次迭代，最终结合公司中间件的能力，实现了一套完整的多语言解决方案。

# 二、多语言文案系统的优势

## 2.1 传统的多语言方案基于Spring

i18n方案，虽然能够解决基本的多语言问题，但是每次多语言的更新维护都需要发版，项目维护成本非常高。vivo多语言文案系统的诞生就很好的解决了这个问题，系统结合公司实际情况，基于公司已有的平台—配置中心，最小化接入成本，优化了项目流程，标准化了文案需求的提出，翻译，测试发布等流程，集中式系统化的管理多语言文案极大的提高了发布效率和文案质量。支持传统web项目和前后端分离项目，因此可以作为基础能力支撑许多系统的本地化方案。

![图片](https://static001.geekbang.org/infoq/56/56a6bb7e7d6ca3086d4eaef9661a7d56.png)

（ 图2-1多语言文案系统和传统多语言方案对比）

# 三、多语言文案系统的整体设计方案

![图片](https://static001.geekbang.org/infoq/83/830e391c68b0170c47a6fd6f99ce1e7e.png)

（图3-1：系统整体设计方案）

多语言文案系统的解决方案整体可以分为3个部分：

**1）MCMS管理系统**

提供多语言项目的创建、语种的创建，各个语种多语言文案的新增，修改，删除和同步等功能，为多语言文案提供了系统化的管理平台。

**2）配置中心**

结合公司实际情况，基于公司中间件—配置中心（vivo cfg），使得接入成本大大降低。配置中心可以看作是MCMS多语言文案管理系统和业务系统的交互桥梁，在MCMS系统按照一定的命名规则对多语言文案进行配置后，会将文案同步至配置中心，供后续业务系统根据自身的项目和语种信息进行多语言文案的获取。

**3）业务系统**

通过引入多语言文案系统（MCMS）提供的jar包，与配置中心进行交互。接入的业务系统，在需要使用到多语言的地方，只需用和MCMS系统相同的命名规则进行多语言key的占位，在项目运行时根据当前环境的语言码即以从配置中心拉取到对应项目-语种的多语言文案并且替换项目中的多语言key，从而实现语言的本地化。

# 四、多语言的具体处理流程

业务系统接入多语言系统后，进行多语言适配的整体架构如下图所示，流程如下：

![](https://static001.geekbang.org/infoq/d9/d99f4a1dc2f68e8167206e157c7752eb.png)

（图4-1：系统整体架构）

1）用户请求业务系统，携带的信息包括：

-   界面可供选择的国家/语言按钮；
    
-   路径中携带的国家信息；
    
-   cookie中携带的国家信息。

2）服务器启动后进行信息初始化：

-   配置当前的默认国家/语种/时区；
    
-   配置mcms系统所需的默认语言。

3）根据用户请求时携带的信息根据以下流程图逻辑判断出最终反馈给用户的国家和语言信息。

![图片](https://static001.geekbang.org/infoq/22/22a4cef2df664fbde4840934231cf70c.png)

（图4-2：多语言处理流程）

4）根据requestCountry,requestLocale设置系统locale，系统locale会影响时区的设置以及多语言文案的后缀。

5）根据系统locale从配置中心中获取对应语种文案，这样，在基本的多语言处理中，我们就加入了国家和locale、时区的对应关系。

通过以上流程一个外销系统在不同的地区，不同的语言环境在系统运行时就可以从配置中心拉取到对应地区的多语言配置，用实际的多语言文案来替代代码中的多语言key，从而实现在不同语言环境下展示不同的多语言文案。

# 五、多语言文案系统的使用

## 5.1 系统简介

![](https://static001.geekbang.org/infoq/d7/d7a0ff647461d6f03a600fb191b7d3b6.png)

（图5-1 MCMS基本功能简介）

-   项目管理：进行项目的创建，在MCMS后台新建一个项目需要在配置中心有一个对应的项目。
    
-   语言管理：在对应的项目下，进行语言版本的创建。
    
-   内容管理：在对应的项目下，根据具体的语言版本配置多语言信息。
    
-   用户管理：进行用户权限的管理，不同用户查看不同的项目。

### 5.2.1 使用流程

**项目的创建**

1）登录MCMS系统，新建项目

![图片](https://static001.geekbang.org/infoq/21/21ac5fb87c902a184e5753d9014082d4.png)

（图5-2 新建多语言项目）

2）AppKey和appSecret的申请（创建语言版本时使用）

APPKey和APPSecret在配置中心的“开放接口”中进行申请。

![](https://static001.geekbang.org/infoq/0c/0ce25dc37606561a232225abce466865.png)

（图5-3：配置中心-开放接口）

在配置中心的“开放接口”中生成appKey和appSecret。

![图片](https://static001.geekbang.org/infoq/49/490056206e7c9e2ede9c19b05f60c0e4.png)

（图5-4 AppKey和appSecret的申请）

## 5.2 语言版本的创建

在多语言文案系统（mcms）后台为项目新增语言版本，可以单个新增或者批量新增。

**1）单个新增**

![图片](https://static001.geekbang.org/infoq/db/db1ae16a1a4f00eda9c3a0c6c04ee9c6.png)

（图5-6 语言版本创建方式）

![](https://static001.geekbang.org/infoq/f4/f4eb0560296469e7a7b4b52b49335353.png)

（图5-7 新建语言版本）

**2）批量新增**

![图片](https://static001.geekbang.org/infoq/7b/7b4f4b72bc69ddc33e92746dbddef04d.png)

（图5-8 批量新增语言版本）

## 5.3 内容管理

在创建完项目并在项目中新增了若干个语言版本后，在内容管理中进行具体的语言信息的配置。

可以单条新增/编辑/审核，也可以批量导入;

**1）新增配置项**

![图片](https://static001.geekbang.org/infoq/c8/c8668d88239a8dbadc76da89a21d4c57.png)

（图5-9 新增配置项内容）

**2）配置项内容的审核**

审核通过/审核驳回 --\> 配置项生效/无效

![图片](https://static001.geekbang.org/infoq/90/903d5ca4a5a1ca547d4681b99472c8da.png)

（图5-10 新增内容审核）

3）内容管理支持查询、新增、导入 、审核、修改、导出功能， 配置项内容的状态转换如图5-11所示：

![图片](https://static001.geekbang.org/infoq/8e/8e302c7acac0093845395f8a08104bd5.png)

（图5-11 配置项内容状态转换图）

**4）批量导入多语言文案**

获取导入模板

![图片](https://static001.geekbang.org/infoq/2a/2a3cb4d48deed3c99428d4041c736619.png)

（ 图5-12 配置项的批量导入和导出）

填写配置键、配置场景、中文文案、外文翻译

![](https://static001.geekbang.org/infoq/6b/6b7250d27d9f84557e857f2d239254dd.png)

（ 图5-13导入文件模板）

导入配置文件生效

## 5.4  用户管理（权限管理）

为项目相关人员申请账号并绑定项目：

-   管理员 \-\- 最高权限，管理所有项目；
    
-   普通用户 \-\- 维护相关项目的多语言内容的权限；

![图片](https://static001.geekbang.org/infoq/d8/d8c843f194d3a9abb5b1d93fcf816293.png)

（图5-14 新建用户和项目权限管理）

# 六、多语言文案系统的接入

## 6.1 引入jar包

![图片](https://static001.geekbang.org/infoq/8e/8e96d358d55019289c9ad4b3393aaa35.png)

（ 图6-1：引入jar包）

## 6.2 配置中心和多语言系统进行关联配置

多语言系统与配置中心是强关联的，可以通过在配置中心配置不同的语言版本，来达到区分不同的语种的目的。

在项目启动时获取到语言的配置信息。

locale.config

![图片](https://static001.geekbang.org/infoq/38/38b988dfb5a2c4da4b6d3cd1e98c7584.png)

env.list.config

![图片](https://static001.geekbang.org/infoq/63/630d080ca601bd8e0b9913c600ec50c0.png)

（图6-2：语种的配置）

```
@Configuration
public class WebConfiguration {

@Bean
public VivoPropertyExtendConfigurer vivoPropertyExtendConfigurer(){
VivoPropertyExtendConfigurer vivoPropertyExtendConfigurer = new VivoPropertyExtendConfigurer();
vivoPropertyExtendConfigurer.setLocations(
new ClassPathResource("config/vivo.properties"));
vivoPropertyExtendConfigurer.setEnvListConfigKey("env.list.config");
return vivoPropertyExtendConfigurer;
}
@Bean
public FilterRegistrationBean mcmsFilterRegistration() {
FilterRegistrationBean registration = new FilterRegistrationBean();
registration.setFilter(new VivoMcmsPropsFilter());
registration.addUrlPatterns("/mcms/props");
registration.setName("vivo-mcms-filter");
registration.setOrder(1);
return registration;
}
}
```

## 6.3 配置中心创建多语言版本

在配置中心创建和多语言系统相对应的语言版本，在多语言系统中配置的多语言文案会同步到对应的配置中心语言版本中。

![](https://static001.geekbang.org/infoq/24/24dc149b7ffeda17fdd09c3589aedad9.png)

（图6-3：当前项目的语言版本）

![图片](https://static001.geekbang.org/infoq/a4/a49e3bf7ec13931ba5edb0d5bd4f8d96.png)

（图6-4：从多语言系统同步到的多语言文案）

## 6.4 多语言的切换

在多语言文案系统中创建的多语言都会同步到配置中心，而配置中心与项目是强关联的，在项目启动时，会从配置中拉取若干配置项。在项目创建了语言版本后，项目启动时会根据当前的语言环境拉取配置中心对应的多语言文案，根据其key-value的数据结构，对项目中的key进行替换，从而实现在不同的语言环境展示不同的语言。

# 七、多语言的切换

多语言文案系统的另一个优点是实现了前台可视化，所见即所得。通过浏览器插件的方式，在前台进行页面调试时，可以实时的对页面当前标签的文案进行多语言的修改，在前端文案展示修改的同时，通过调用MCMS系统提供的接口将修改内容实时的更新到数据库和同步到配置中心，从而实现前端页面修改和后台服务端数据的一致性。多语言文案的可视化大大提高了系统的使用体验，提升了接入方的开发效率。

![](https://static001.geekbang.org/infoq/91/915a2cabc127ec32907fb6d55e09f97d.png)

（ 图7-1   多语言前端可视化）

# 八、结语

本文主要介绍了vivo外销多语言文案系统的产生背景，方案设计，业务系统的接入，以及可视化等。凭借接入简单，系统化管理，可视化，即时生效等优点已经有越来越多的外销项目接入了多语言文案系统。接下来为了适应快速发展的外销业务，系统也会不断的迭代优化，成为更方便，更快捷，更直观的多语言解决平台。

> 作者：vivo官网商城开发团队-Sun Yanwu

ITPub博客

vivo全球商城全球化演进之路——多语言解决方案

最新文章