參考部落格：https://www.jianshu.com/p/8b4c63e1cf25

準備

1.下載jquery和jquery-i18n-properties

i18n地址：https://github.com/jquery-i18n-properties

程式碼

參考部落格：https://www.jianshu.com/p/8b4c63e1cf25

js程式碼（核心部分）

注意

1.查詢路徑是，path + name + '_' +language + '.properties',所以這三個引數很重要。也是通過，language引數的變化，進行多語言切換的。

2.自定義的元素屬性是data-lang='配置的key值'，當然這個元素屬性可以自己定義，例如lang-detail等等

  jQuery.i18n.properties({//載入資瀏覽器語言對應的資原始檔
        name: 'lang', //資原始檔名稱
        path:'./lang/', //資原始檔路徑
        language: tmp_lang,
        cache: false,
        mode:'map', //用Map的方式使用資原始檔中的值
        callback: function() {//載入成功後設置顯示內容
          for(var i in $.i18n.map){// 
            $('[data-lang="'+i+'"]').text($.i18n.map[i]);
          }
          // document.title = $.i18n.map['title'];
        }
      });

 

html部分

1.引入i18n的js;

2.配置data-lang(自定義)的多語言切換key值

<h2 class="title" data-lang="grantAttributionManagement">授予歸屬管理</h2>

配置檔案properties

1.地址，上面已經說了

2.名稱上面也已經提及，按照格式就行

# lang_zh.properties
switch=切換成繁體
incentivePlanManagement=激勵計劃管理
incentivePlanDetail=高度定製化的計劃管理，多維度報表
 

存在問題

問題描述：載入properties檔案出現跨域的問題；

問題原因：

因為是本地開啟靜態html檔案，file的請求方式，所以出現這種問題

問題解決

1.通過瀏覽器設定跨域引數

2.使用VSCODE軟體的liver Serve 開啟