# 一、背景

隨著經濟全球化的深入，許多中國品牌紛紛開始在海外市場開疆擴土。實現全球化意味著你的產品或者應用需要能夠在全球各地的語言環境使用，我們在進行海外業務的推進時，需要面對的最大挑戰就是多語言問題。實現好多語言系統的本地化，更方便快捷的修改多語言文案能讓你的產品在各個國家地區裡有更強的產品競爭力和更好的使用者體驗以及更低的維護成本。以此為目標，在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

vivo全球商城全球化演進之路——多語言解決方案

相關文章