踩坑vue國際化（V18n）+ jquery國際化（jquert.i18n.properties.js）

目前公司在搞國際化，雖然剛開始接觸，但仍是遇到了一些問題，如對你有幫助，煩請點個贊，謝謝。

先分享一下vue的國際化，目前vue的國際化採用的是vue-i18n。
首先新建一個存放語言的文件目錄,把提取後的中文、英文放在對應的文件中以下圖：

經過Vue.use調用內部install方法，最後別忘了在main.js中引入，綁定在vue實例上。
在組件的html中語法:

在js中語法:

在js中調用 this.$i18n.locale = language（例：en_US，跟語言文件export出的對象名稱保持一致）實現修改語言。

注意這裏：
一、養成良好的編程習慣，在寫邏輯判斷的時候，不要根據中文去判斷，否則作國際化要改起來很麻煩。好比使用if (xxx === '中文')、xxx.indexof(‘中文’)、switch(xxx) { case ’中文‘: }等；
二、在組件created以後mounted以前V18n纔會執行替換對應的語言，就意味着有些人在data（）裏面用中文初始化了一些屬性，可是此時V18n尚未執行，因而一些屬性被賦值成了$t('xxxxx')，即鍵值。

如圖，我在data中初始化了title屬性，而後在created時候打印該屬性，發現控制檯報了2個警告，而後該屬性被賦值成了鍵值。解決方案就是：在data中初始化時不指定默認值，在mounted的時候進行賦值就ok了

mounted() {
    setTimeout(() => {
      console.log('mounted():'執行);
      let ckText = {
        title: this.$t('pro_container.test'),
        hoverText: this.$t('pro_container.94'),
        AvgArr: []
      };
      this.ckText = ckText;
    }, 20);
  }

以後就能夠手動調用this.$i18n.locale = en_US方法實現中英文切換了，也能夠根據cookie去賦值.

分享一個kiwi插件，kiwi是一款提取替換中文的插件，喜歡的也能夠試試，十分好用，你們能夠看一下連接中的文檔。

最後簡單說一下jq的國際化吧，引入jquery.i18n.properties.js文件,配置項以下：

function loadI18nProperties(lang) {
        $.i18n.properties({
            name: 'strings', // 對應國際化文件名稱
            path: '/static/js/i18n/', // 對應國際化文件目錄
            mode : 'map', //用Map的方式使用資源文件中的值
            language: lang, // 調用國際化語言
            callback: function() { // 回調函數
            }
    });
    $(document).ready(function() {
        loadI18nProperties('zh_CN');
    });

name屬性指的是國際化的文件名，jq的存放語言的文件是.properties爲後綴的，以上面的例子，語言文件名爲strings_en_US、strings_zh_CN。若是path寫的不對的話，會報一個跨域的錯誤，提示讓你去修改服務器配置文件去支持.properties文件，這裏注意一下就行了。其餘的在html中使用自定義屬性方式賦值，js中就是簡單的變量的方式。修改語言，就是將loadI18nProperties（lang）傳遞參數就去就能夠了。

// html
<h1 data-i18n="UserName"></h1>
// js中
var Title = $.i18n.prop('js.UserName');