多語言(i18n)支持 是企業項目走向國際化的必經之路，也是前端工程師最佳實踐的內容之一。不過，多語言框架眾多，會帶來一系列選型問題，相信大家在平時對項目進行多語言支持時，也往往會遇到如下幾個問題：
其實，多語言框架雖多，但是從傳統的 jquery 時代到目前流行的 MVVM 框架，多語言方案一直在演進和優化，最終目的是將其普適化和最簡化。理解了這一點，學習多語言技術就容易多了。
我在設計和實踐低代碼/零代碼搭建平臺 Dooring 的過程中，也遇到了多語言方案的技術選型，目前方案基本完成，接下來我將帶大家一步步分析多語言在不同技術棧中的實現方案，并以實際的項目讓大家掌握多言語技術，在文章最后我也會提出對多語言未來演進的一些方向，供大家研究和探索。
按照我一向的寫作風格，我會在下面列出文章的大綱，以便大家有選擇且高效率的閱讀和學習：
? 原生js/jquery方案實現多語言
vue項目中的多語言方案
react項目中的多語言方案
目前常用的多語言方案介紹和實踐
目前常用的多語言方案基本都是人工翻譯，然后通過動態替換來實現語言的切換，但是不同的技術框架模式稍有不同, 接下來我們就逐個分析一下。
1. 原生js/jquery方案實現多語言
在傳統方案中最容易想到的就是dom替換。我們通過提前定義好多語言文件(或文案Map)，并在html標簽中做語言映射，最后通過切換函數來動態的切換網站語言。其基本的模式如下：
js 體驗AI代碼助手 代碼解讀復制代碼// 語言庫，我們有兩種方式來定義
// 1. 單文件Map模式, lang.js
const lang = {
zh: {
'title': 'H5編輯器',
'userLogin': '用戶登錄',
'usernameError': '請輸入用戶名'
},
en: {
'title': 'H5 editor',
'userLogin': 'The user logs on',
'usernameError': 'Please enter your username'
},
}
// 2. 多語言包模式
lang/cn.json
lang/en.json
html標簽結構如下：
<select id="langControl">
<option value="cn">中文</option>
<option value="en">English</option>
</select>
<div lang="title">H5編輯器</div>
<div lang="userLogin">用戶登錄</div>
最后我們通過 javascript 遍歷 [lang] 屬性并通過映射關系來替換語言。當然我們還可以通過 template.js 這樣的模版引擎來優化我們dom的渲染替換方式，但是以上方案在落地過程中仍然需要考慮很多問題。如下：
語言持久化需要單獨處理
無法動態添加語言文本
無法引入變量以及讀取語言文本
缺乏靈活性和配置化
在傳統方案中我們為了解決以上問題并支持更復雜系統，我們不得不考慮插件化，當然 Jquery-I18n 就是一個非常不錯的解決方案。它可以幫助我們輕松地國際化 Web 應用程序，并且支持鏈式調用, 且可以無刷新切換語言。接下來我就帶大家使用 Jquery-I18n 實現一個簡單的demo，讓大家更好的掌握該方案。
1.引入資源
<script src="https://cdn.bootcss.com/jquery/3.10.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/js-cookie/latest/js.cookie.min.js"></script>
<script src="./js/jquery.i18n.js"></script>
2.創建并配置多語言文件
3.編寫頁面內容
<select id="langControl">
<option value="cn">中文</option>
<option value="en">English</option>
</select>
<div lang="title">H5編輯器</div>
<div lang="userLogin">用戶登錄</div>
4.初始化 i18n 配置并實現語言切換邏輯
function toggleLang(lang){
$("[lang]").i18n({
defaultLang: lang, // 默認語言
filePath: "/lang/", // 語言文件所在的目錄
filePrefix: "", // 語言文件前綴
fileSuffix: "", // 語言文件后綴
forever: true,
callback: function(res) {} // 初始化后的回調
});
}
// 語言切換
$('#langControl').change(val => {
toggleLang(val)
}
當然 Jquery-I18n 有更多強大的配置，大家可以參考文檔進行配置，相關庫 github 地址如下：
Jquery-I18n
jquery-i18n-properties
當然以上方案還只是手動切換語言，更多的需求場景是要我們基于用戶當前的瀏覽器環境或者網站鏈接地址的參數不同來自動切換對應的語言。對于通過鏈接參數來改變系統語言，這個我們只需要通過解析參數并進行對應的處理即可，比如解析 http://xxx.xxx?lan=cn 或 http://xxx.xxx?lan=en。當然瀏覽器也提供了對應的 api 可以獲取當前用戶瀏覽的環境：navigator.language ，我們在瀏覽器控制臺輸入該腳本的結果如下：
所以我們可以根據這個信息來自動匹配用戶當前的語言模式。
2. vue項目中的多語言方案
基于 Vue 的多語言方案網上也有很多，畢竟國內大部分企業都在使用 Vue 開發項目，所以我簡單列舉幾個成熟的方案給大家，并對其中一個方案給出具體的實踐：
當然大家如果做的不是很復雜的項目，也可以直接采用 simplest-i18n，因為其更簡單輕量。
接下來我會以一個完整的例子來說明如何使用 vue-i18n 來做 Vue 項目的國際化。
1.定義語言文件
2.引入依賴并注冊語言包
import Vue from "vue";
import VueI18n from "vue-i18n";
Vue.use(VueI18n);
// 加載所有語言環境并記住上下文
function loadMessages() {
const context = require.context("./lang", true, /[a-z0-9-_]+.json$/i);
const messages = context
.keys()
.map((key) => ({ key, locale: key.match(/[a-z0-9-_]+/i)[0] }))
.reduce(
(messages, { key, locale }) => ({
...messages,
[locale]: context(key),
}),
{}
);
return { context, messages };
}
const { context, messages } = loadMessages();
// VueI18n 實例
const i18n = new VueI18n({
locale: navigator.language, // 根據瀏覽器環境設置網站語言
messages,
});
// 運行程序
const app = new Vue({
i18n,
// ...
}).$mount('#app');
// 切換語言(在組件內也可以使用$i18n.locale來切換語言環境)
i18n.locale = 'en-US'
// 熱更新支持
if (module.hot) {
module.hot.accept(context.id, () => {
const { messages: newMessages } = loadMessages();
Object.keys(newMessages)
.filter((locale) => messages[locale] !== newMessages[locale])
.forEach((locale) => {
messages[locale] = newMessages[locale];
i18n.setLocaleMessage(locale, messages[locale]);
});
});
}
當然在項目中我們還可以延遲加載翻譯，原理類似 webpack 的異步加載文件，參考如下：
export function loadLangAsync(lang) {
// 如果語言相同
if (i18n.locale === lang) {
return Promise.resolve(...)
}
// 如果語言已經加載
if (loadedLanguages.includes(lang)) {
return Promise.resolve(...)
}
// 如果尚未加載語言
return import(/* webpackChunkName: "lang-[request]" */ `@/lang/${lang}.json`).then(
messages => {
// ... 處理邏輯
}
)
}
同時 vue-cli 還提供了對應的插件 vue-cli-plugin-i18n 來支持通過配置化的方式開啟多語言。
轉載：如何解決前端多語言選型和實現難題？多語言(i18n)支持 是企業項目走向國際化的必經之路，也是前端工程師最佳實踐的內容之 - 掘金
400 186 1886
