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

Jeff 發布于2019-08-26 13:33 / 2069人閱讀

摘要：首先新建一個存放語言的文件目錄把提取后的中文英文放在對應的文件中如下圖通過調用內部方法，最后別忘了在中引入，綁定在實例上。注意這里養成良好的編程習慣，在寫邏輯判斷的時候，不要根據中文去判斷，不然做國際化要改起來很麻煩。

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

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

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

在js中語法:

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

注意這里：
1、養成良好的編程習慣，在寫邏輯判斷的時候，不要根據中文去判斷，不然做國際化要改起來很麻煩。比如使用if (xxx === "中文")、xxx.indexof(‘中文’)、switch(xxx) { case ’中文‘: }等；
2、在組件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

// js中
var Title = $.i18n.prop("js.UserName");

GPU云服務器云服務器 V18n vue-i18n jQuery18 初踩坑

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109020.html

前端通用國際化解決方案

摘要：前端通用國際化解決方案背景前端技術日新月異，技術棧繁多。接下來針對這幾塊內容并結合日常的開發流程說明國際化的通用解決方案。文章首發于個人blog，歡迎大家關注。 DI18n 前端通用國際化解決方案背景前端技術日新月異，技術棧繁多。以前端框架來說有React, Vue, Angular等等，再配以webpack, gulp, Browserify, fis等等構建工具去滿足日常的開...

lingdududu 2019-08-20 15:46 評論0 收藏0
前端常用插件、工具類庫匯總（下）

摘要：上一篇前端常用插件工具類庫匯總上內容摘要動畫庫滾動庫輪播圖滾屏彈出框消息通知下拉框級聯選擇器顏色選擇器時間日期處理表單驗證分頁插件本篇延續上一篇的內容繼續給大家帶來一系列關于前端插件工具類的內容。 showImg(https://segmentfault.com/img/bVbjsMh?w=900&h=383); 前言對本文感興趣可以先加個收藏，也可以轉發分享給身邊的小伙伴，以后遇到...

ideaa 2019-08-23 13:08 評論0 收藏0
前端國際化的另類方式

摘要：前不久做了一個國際化的項目，基于和，里面用到了國際化，使用方式也很簡單然后，頁面所有的官方組件都變成了中文默認是英文。前端配置是指如何根據需要把需要展示的語言顯示在頁面，比如在中文環境下顯示中文，英文環境下顯示英文，用戶看得到才算數。關于國際化一個項目發展到一定的環境或者一開始就是為多國打造的，就需要考慮國際化了。簡單來說，就是一套頁面，多套語言。前不久做了一個國際化的項目，基于...

FullStackDeveloper 2019-08-23 13:09 評論0 收藏0
前端國際化的另類方式

摘要：前不久做了一個國際化的項目，基于和，里面用到了國際化，使用方式也很簡單然后，頁面所有的官方組件都變成了中文默認是英文。前端配置是指如何根據需要把需要展示的語言顯示在頁面，比如在中文環境下顯示中文，英文環境下顯示英文，用戶看得到才算數。關于國際化一個項目發展到一定的環境或者一開始就是為多國打造的，就需要考慮國際化了。簡單來說，就是一套頁面，多套語言。前不久做了一個國際化的項目，基于...

everfight 2019-08-02 11:59 評論0 收藏0
前端國際化的另類方式

摘要：前不久做了一個國際化的項目，基于和，里面用到了國際化，使用方式也很簡單然后，頁面所有的官方組件都變成了中文默認是英文。前端配置是指如何根據需要把需要展示的語言顯示在頁面，比如在中文環境下顯示中文，英文環境下顯示英文，用戶看得到才算數。關于國際化一個項目發展到一定的環境或者一開始就是為多國打造的，就需要考慮國際化了。簡單來說，就是一套頁面，多套語言。前不久做了一個國際化的項目，基于...

blastz 2019-08-29 17:14 評論0 收藏0