資訊專欄INFORMATION COLUMN
摘要：首先新建一個(gè)存放語言的文件目錄把提取后的中文英文放在對應(yīng)的文件中如下圖通過調(diào)用內(nèi)部方法，最后別忘了在中引入，綁定在實(shí)例上。注意這里養(yǎng)成良好的編程習(xí)慣，在寫邏輯判斷的時(shí)候，不要根據(jù)中文去判斷，不然做國際化要改起來很麻煩。
目前公司在搞國際化，雖然剛開始接觸，但還是遇到了一些問題，如對你有幫助，煩請點(diǎn)個(gè)贊，謝謝。
先分享一下vue的國際化，目前vue的國際化采用的是vue-i18n。
首先新建一個(gè)存放語言的文件目錄,把提取后的中文、英文放在對應(yīng)的文件中如下圖：
通過Vue.use調(diào)用內(nèi)部install方法，最后別忘了在main.js中引入，綁定在vue實(shí)例上。
在組件的html中語法:
在js中語法:
在js中調(diào)用 this.$i18n.locale = language（例：en_US，跟語言文件export出的對象名稱保持一致）實(shí)現(xiàn)修改語言。
注意這里：
1、養(yǎng)成良好的編程習(xí)慣，在寫邏輯判斷的時(shí)候，不要根據(jù)中文去判斷，不然做國際化要改起來很麻煩。比如使用if (xxx === "中文")、xxx.indexof(‘中文’)、switch(xxx) { case ’中文‘: }等；
2、在組件created之后mounted之前V18n才會(huì)執(zhí)行替換對應(yīng)的語言，就意味著有些人在data（）里面用中文初始化了一些屬性，但是此時(shí)V18n還沒有執(zhí)行，于是一些屬性被賦值成了$t("xxxxx")，即鍵值。
如圖，我在data中初始化了title屬性，然后在created時(shí)候打印該屬性，發(fā)現(xiàn)控制臺(tái)報(bào)了2個(gè)警告，然后該屬性被賦值成了鍵值。解決方案就是：在data中初始化時(shí)不指定默認(rèn)值，在mounted的時(shí)候進(jìn)行賦值就ok了
mounted() {
setTimeout(() => {
console.log("mounted():"執(zhí)行);
let ckText = {
title: this.$t("pro_container.test"),
hoverText: this.$t("pro_container.94"),
AvgArr: []
};
this.ckText = ckText;
}, 20);
}
之后就可以手動(dòng)調(diào)用this.$i18n.locale = en_US方法實(shí)現(xiàn)中英文切換了，也可以根據(jù)cookie去賦值.
分享一個(gè)kiwi插件，kiwi是一款提取替換中文的插件，喜歡的也可以試試，十分好用，大家可以看一下鏈接中的文檔。
最后簡單說一下jq的國際化吧，引入jquery.i18n.properties.js文件,配置項(xiàng)如下：
function loadI18nProperties(lang) {
$.i18n.properties({
name: "strings", // 對應(yīng)國際化文件名稱
path: "/static/js/i18n/", // 對應(yīng)國際化文件目錄
mode : "map", //用Map的方式使用資源文件中的值
language: lang, // 調(diào)用國際化語言
callback: function() { // 回調(diào)函數(shù)
}
});
$(document).ready(function() {
loadI18nProperties("zh_CN");
});
name屬性指的是國際化的文件名，jq的存放語言的文件是.properties為后綴的，以上面的例子，語言文件名為strings_en_US、strings_zh_CN。如果path寫的不對的話，會(huì)報(bào)一個(gè)跨域的錯(cuò)誤，提示讓你去修改服務(wù)器配置文件去支持.properties文件，這里注意一下就好了。其他的在html中使用自定義屬性方式賦值，js中就是簡單的變量的方式。修改語言，就是將loadI18nProperties（lang）傳遞參數(shù)就去就可以了。
// html
// js中
var Title = $.i18n.prop("js.UserName");
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/109020.html
摘要：前端通用國際化解決方案背景前端技術(shù)日新月異，技術(shù)棧繁多。接下來針對這幾塊內(nèi)容并結(jié)合日常的開發(fā)流程說明國際化的通用解決方案。 文章首發(fā)于個(gè)人blog，歡迎大家關(guān)注。 DI18n 前端通用國際化解決方案 背景 前端技術(shù)日新月異，技術(shù)棧繁多。以前端框架來說有React, Vue, Angular等等，再配以webpack, gulp, Browserify, fis等等構(gòu)建工具去滿足日常的開...
摘要：上一篇前端常用插件工具類庫匯總上內(nèi)容摘要?jiǎng)赢嫀鞚L動(dòng)庫輪播圖滾屏彈出框消息通知下拉框級(jí)聯(lián)選擇器顏色選擇器時(shí)間日期處理表單驗(yàn)證分頁插件本篇延續(xù)上一篇的內(nèi)容繼續(xù)給大家?guī)硪幌盗嘘P(guān)于前端插件工具類的內(nèi)容。 showImg(https://segmentfault.com/img/bVbjsMh?w=900&h=383); 前言 對本文感興趣可以先加個(gè)收藏，也可以轉(zhuǎn)發(fā)分享給身邊的小伙伴，以后遇到...
摘要：前不久做了一個(gè)國際化的項(xiàng)目，基于和，里面用到了國際化，使用方式也很簡單然后，頁面所有的官方組件都變成了中文默認(rèn)是英文。前端配置是指如何根據(jù)需要把需要展示的語言顯示在頁面，比如在中文環(huán)境下顯示中文，英文環(huán)境下顯示英文，用戶看得到才算數(shù)。 關(guān)于國際化 一個(gè)項(xiàng)目發(fā)展到一定的環(huán)境或者一開始就是為多國打造的，就需要考慮國際化了。簡單來說，就是一套頁面，多套語言。 前不久做了一個(gè)國際化的項(xiàng)目，基于...
摘要：前不久做了一個(gè)國際化的項(xiàng)目，基于和，里面用到了國際化，使用方式也很簡單然后，頁面所有的官方組件都變成了中文默認(rèn)是英文。前端配置是指如何根據(jù)需要把需要展示的語言顯示在頁面，比如在中文環(huán)境下顯示中文，英文環(huán)境下顯示英文，用戶看得到才算數(shù)。 關(guān)于國際化 一個(gè)項(xiàng)目發(fā)展到一定的環(huán)境或者一開始就是為多國打造的，就需要考慮國際化了。簡單來說，就是一套頁面，多套語言。 前不久做了一個(gè)國際化的項(xiàng)目，基于...
摘要：前不久做了一個(gè)國際化的項(xiàng)目，基于和，里面用到了國際化，使用方式也很簡單然后，頁面所有的官方組件都變成了中文默認(rèn)是英文。前端配置是指如何根據(jù)需要把需要展示的語言顯示在頁面，比如在中文環(huán)境下顯示中文，英文環(huán)境下顯示英文，用戶看得到才算數(shù)。 關(guān)于國際化 一個(gè)項(xiàng)目發(fā)展到一定的環(huán)境或者一開始就是為多國打造的，就需要考慮國際化了。簡單來說，就是一套頁面，多套語言。 前不久做了一個(gè)國際化的項(xiàng)目，基于...
閱讀 736·2023-04-26 02:08
閱讀 2776·2021-11-18 10:02
閱讀 3542·2021-11-11 16:55
閱讀 2408·2021-08-17 10:13
閱讀 2960·2019-08-30 15:53
閱讀 737·2019-08-30 15:44
閱讀 2615·2019-08-30 11:10
閱讀 1817·2019-08-29 16:57
