成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

jsummer / 996人閱讀

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

需求

公司項(xiàng)目需要國(guó)際化，點(diǎn)擊按鈕切換中文/英文

1、安裝 
npm install vue-i18n --save
2、注入 vue 實(shí)例中，項(xiàng)目中實(shí)現(xiàn)調(diào)用 api 和 模板語(yǔ)法 
import VueI18n from "vue-i18n"

Vue.use(VueI18n) ;

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

new Vue({
  el: "#app",
  i18n,  // 最后
  router,
  template: "",
  components: { App }
})
3、對(duì)應(yīng)語(yǔ)言包 
zh.js中文語(yǔ)言包：

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

en.js 英文語(yǔ)言包：

export const lang = {
  homeOverview:"Home overview",
  firmOverview:"firmOverview",
  firmReports:"firmReports",
  firmAppendix:"firmAppendix",
  firmIndex:"firmIndex",
  firmAnalysis:"firmAnalysis",
  firmNews:"firmNews",
  firmOther:"firmOther"
}
4、按鈕控制切換語(yǔ)言 
this.$i18n.locale,當(dāng)你賦值為‘zh-CN’時(shí)，導(dǎo)航欄就變成中文；當(dāng)賦值為 ‘en-US’時(shí)，就變成英文：


中文

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

靜態(tài)渲染：


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

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

動(dòng)態(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);
    }
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94035.html

相關(guān)文章

  • vue-i18n和elementUI實(shí)現(xiàn)國(guó)際化

    摘要：為了滿足很多公司都已經(jīng)向方向發(fā)展顧使用多語(yǔ)言的網(wǎng)站已經(jīng)太普遍了所以是使用和實(shí)現(xiàn)國(guó)際化接下來(lái)我會(huì)盡量寫的詳細(xì)一點(diǎn)的內(nèi)容個(gè)人覺(jué)得的應(yīng)該寫得清楚一些安裝所需要用到的東西安裝安裝創(chuàng)建目錄編寫所需要用到的語(yǔ)言我只寫了中文和英文歡迎來(lái)到我 為了滿足很多公司都已經(jīng)向international方向發(fā)展,顧使用多語(yǔ)言的網(wǎng)站已經(jīng)太普遍了, 所以是使用vue-i18n和elementUI實(shí)現(xiàn)國(guó)際化.接下來(lái)我...

    _ang 評(píng)論0 收藏0

  • 基于Vue、vue-i18n實(shí)現(xiàn)國(guó)際化（多語(yǔ)言）

    摘要：在中引入調(diào)用第三方插件新建一個(gè)對(duì)象默認(rèn)語(yǔ)言配置語(yǔ)言選項(xiàng)是一個(gè)配置語(yǔ)言包文件和語(yǔ)言選項(xiàng)的文件，文件內(nèi)容大致如下語(yǔ)言包列表合并語(yǔ)言包是一個(gè)函數(shù)，判斷當(dāng)前設(shè)置的語(yǔ)言類型，如果沒(méi)有設(shè)置語(yǔ)言，則根據(jù)判斷是中文還是非中文，非中文則顯示英語(yǔ)。 vue-i18n官網(wǎng) https://kazupon.github.io/vue... 項(xiàng)目用vue-cli構(gòu)建，用到vue全家桶及webpack、iview...

    smallStone 評(píng)論0 收藏0

  • Vue國(guó)際化處理 vue-i18n 以及項(xiàng)目自動(dòng)切換中英文

    摘要：直接上預(yù)覽鏈接國(guó)際化處理以及項(xiàng)目自動(dòng)切換中英文環(huán)境搭建命令進(jìn)入項(xiàng)目目錄，執(zhí)行以下命令安裝國(guó)際化插件項(xiàng)目增加國(guó)際化翻譯文件在項(xiàng)目的下添加文件夾增加中文翻譯文件以及英文翻譯文件，里面分別存儲(chǔ)項(xiàng)目中需要翻譯的信息。 0. 直接上 預(yù)覽鏈接 Vue國(guó)際化處理 vue-i18n 以及項(xiàng)目自動(dòng)切換中英文 1. 環(huán)境搭建 命令進(jìn)入項(xiàng)目目錄，執(zhí)行以下命令安裝vue 國(guó)際化插件vue-i18n...

    wangtdgoodluck 評(píng)論0 收藏0

  • vue-i18n結(jié)合Element-ui的配置

    摘要：官網(wǎng)已經(jīng)做了詳細(xì)介紹，這里依葫蘆畫瓢跟著實(shí)現(xiàn)一下為了實(shí)現(xiàn)插件的多語(yǔ)言切換按照如上把國(guó)際化文件都整合到一起，避免中大段引入相關(guān)代碼。 使用方法： 在配合 Element-UI 一起使用時(shí)，會(huì)有2個(gè)問(wèn)題： ####（1）、頁(yè)面刷新后，通過(guò)按鈕切換的語(yǔ)言還原成了最初的語(yǔ)言，無(wú)法保存 ####（2）、框架內(nèi)部自帶的提示文字無(wú)法更改，比如像時(shí)間選擇框內(nèi)部中的提示文字 關(guān)于第一個(gè)問(wèn)題，可以在初始化...

    孫淑建 評(píng)論0 收藏0

  • 前端國(guó)際化之Vue-i18n源碼分析

    摘要：最近的工作當(dāng)中有個(gè)任務(wù)是做國(guó)際化。下文有對(duì)的源碼進(jìn)行分析。因?yàn)橛⑽牡拈喿x方向也是從左到右，因此語(yǔ)言展示的方向不予考慮。服務(wù)端數(shù)據(jù)翻譯前端樣式的調(diào)整中文轉(zhuǎn)英文后部分文案過(guò)長(zhǎng)圖片第三方插件地圖等中文轉(zhuǎn)英文后肯定會(huì)遇到文案過(guò)長(zhǎng)的情況。 最近的工作當(dāng)中有個(gè)任務(wù)是做國(guó)際化。這篇文章也是做個(gè)簡(jiǎn)單的總結(jié)。 部分網(wǎng)站的當(dāng)前解決的方案 不同語(yǔ)言對(duì)應(yīng)不同的頁(yè)面。在本地開(kāi)發(fā)的時(shí)候就分別打包輸出了不同語(yǔ)言版...

    不知名網(wǎng)友 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<