今天就跟大家聊聊有關(guān)vue實現(xiàn)多語言切換的方法，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

專注于為中小企業(yè)提供成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)梁園免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了超過千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

鑒于以上原因，瀏覽器自帶的 Google 翻譯方案基本不考慮了。

現(xiàn)在只剩下第二種方案了，語言配置文件和頁面結(jié)構(gòu)分離。前面提過，vue-i18n用得不徹底，如果把所有組件重新規(guī)范化，工作量太大了。有沒有辦法不修改現(xiàn)有代碼，也能實現(xiàn)文本翻譯呢？很自然地就想到了 Google 翻譯的思路，直接對頁面渲染結(jié)果進行翻譯。自己翻譯的優(yōu)勢就是，可以精細地控制 DOM 操作，比如可以把輸入框里的文本和placeholder也翻譯出來。同時，經(jīng)過研究發(fā)現(xiàn)，Vue 組件通過數(shù)據(jù)綁定渲染出來的 DOM 元素，包含的文本內(nèi)容不能直接通過 innerHTML或者innerText修改，這樣會導(dǎo)致響應(yīng)式失效。解決辦法是操作它的子元素，也就是文本節(jié)點（nodeType為3的節(jié)點），修改它的 textContent屬性。

多語言配置映射表

跟 Google 翻譯不同之處在于，我們采用靜態(tài)翻譯，也就是通過多語言配置文件映射。 vue-i18n 是每種語言準(zhǔn)備一個 JSON 文件，屬性名用英文，用命名空間（多層級對象）的方式避免命名沖突。我直接簡化了，用一個 JS 對象存儲所有語言版本，鍵名就是頁面用到的中文。隨著日積月累的開發(fā)迭代，這些中文散落在幾百個文件里……我的做法是用 VS Code 全局正則搜索，把查找結(jié)果復(fù)制出來，寫一個 JS 方法把這些字符串處理成 JS 對象。

匹配中文的正則（不夠全面，有些還夾雜了其他符號）：

[A-Z]*[\u4e00-\u9fa5][，,!！ 0-9a-zA-Z\u4e00-\u9fa5]*

將結(jié)果復(fù)制到翻譯工具翻譯，再寫一個函數(shù)把這些文本合并成對象，并保存到labels.js文件中備用。

var kv = dist.reduce((acc,cur, index) => {
acc[cur]=en[index] || cur;return acc;
},{})

當(dāng)前名稱：vue實現(xiàn)多語言切換的方法-創(chuàng)新互聯(lián)
瀏覽地址：http://weahome.cn/article/sppcj.html