vue，使用vue-i18n實現(xiàn)國際化

jsummer 發(fā)布于2019-08-22 16:05 / 990人閱讀

摘要：需求公司項目需要國際化，點擊按鈕切換中文英文安裝注入實例中，項目中實現(xiàn)調(diào)用和模板語法語言標(biāo)識通過切換的值來實現(xiàn)語言切換中文語言包英文語言包最后對應(yīng)語言包中文語言包首頁概覽公司概述財務(wù)報表更多附錄主要財務(wù)指標(biāo)對比分析新聞事件檔案

需求

公司項目需要國際化，點擊按鈕切換中文/英文

1、安裝

npm install vue-i18n --save

2、注入 vue 實例中，項目中實現(xiàn)調(diào)用 api 和模板語法

import VueI18n from "vue-i18n"

Vue.use(VueI18n) ;

const i18n = new VueI18n({
    locale: "zh-CN",    // 語言標(biāo)識, 通過切換locale的值來實現(xiàn)語言切換,this.$i18n.locale 
    messages: {
      "zh-CN": require("./common/lang/zh"),   // 中文語言包
      "en-US": require("./common/lang/en")    // 英文語言包
    }
})

new Vue({
  el: "#app",
  i18n,  // 最后
  router,
  template: "",
  components: { App }
})

3、對應(yīng)語言包

zh.js中文語言包：

export const lang = {
  homeOverview:"首頁概覽",
  firmOverview:"公司概述",
  firmReports:"財務(wù)報表",
  firmAppendix:"更多附錄",
  firmIndex:"主要財務(wù)指標(biāo)",
  firmAnalysis:"對比分析",
  firmNews:"新聞事件檔案",
  firmOther:"其他功能",
}

en.js 英文語言包：

export const lang = {
  homeOverview:"Home overview",
  firmOverview:"firmOverview",
  firmReports:"firmReports",
  firmAppendix:"firmAppendix",
  firmIndex:"firmIndex",
  firmAnalysis:"firmAnalysis",
  firmNews:"firmNews",
  firmOther:"firmOther"
}

4、按鈕控制切換語言

this.$i18n.locale,當(dāng)你賦值為‘zh-CN’時，導(dǎo)航欄就變成中文；當(dāng)賦值為 ‘en-US’時，就變成英文：

中文
 
changeLangEvent() {
    console.log("changeLangEvent");
    this.$confirm("確定切換語言嗎?", "提示", {
      confirmButtonText: "確定",
      cancelButtonText: "取消",
      type: "warning"
    }).then(() => {
      if ( this.$i18n.locale === "zh-CN" ) {
        this.$i18n.locale = "en-US";//關(guān)鍵語句
        console.log("en-US")
      }else {
        this.$i18n.locale = "zh-CN";//關(guān)鍵語句
        console.log("zh-CN")
      }
    }).catch(() => {
      console.log("catch");
      this.$message({
        type: "info",
      });
    });
  }

4、模板渲染

靜態(tài)渲染：


{{$t("lang .homeOverview")}}

如果是element-ui 的，在要翻譯的前面加上冒號
比如：label="用戶姓名" 就改成 :label="$t("order.userName")"

動態(tài)渲染：

{{navCompany}}
 computed:{
      navCompany:function(){
        if(this.nav_company){
          let str = "lang"+this.nav_company;
          return this.$t(str);
        }
      }
},
    
 
    
 

      
              


methods: {
    getTitle(title){
        let str = "lang."+title;
        return this.$t(str);
    }
}