vue，使用vue-i18n實現國際化

jsummer 發布于2019-08-22 16:05 / 994人閱讀

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

需求

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

1、安裝

npm install vue-i18n --save

2、注入 vue 實例中，項目中實現調用 api 和模板語法

import VueI18n from "vue-i18n"

Vue.use(VueI18n) ;

const i18n = new VueI18n({
    locale: "zh-CN",    // 語言標識, 通過切換locale的值來實現語言切換,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、對應語言包

zh.js中文語言包：

export const lang = {
  homeOverview:"首頁概覽",
  firmOverview:"公司概述",
  firmReports:"財務報表",
  firmAppendix:"更多附錄",
  firmIndex:"主要財務指標",
  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,當你賦值為‘zh-CN’時，導航欄就變成中文；當賦值為 ‘en-US’時，就變成英文：

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

4、模板渲染

靜態渲染：


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

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

動態渲染：

{{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);
    }
}

云服務器 GPU云服務器 vue-i18n VUE實現webrtc Vue實現分頁 vue使用webrtc

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

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

vue-i18n和elementUI實現國際化

摘要：為了滿足很多公司都已經向方向發展顧使用多語言的網站已經太普遍了所以是使用和實現國際化接下來我會盡量寫的詳細一點的內容個人覺得的應該寫得清楚一些安裝所需要用到的東西安裝安裝創建目錄編寫所需要用到的語言我只寫了中文和英文歡迎來到我為了滿足很多公司都已經向international方向發展,顧使用多語言的網站已經太普遍了, 所以是使用vue-i18n和elementUI實現國際化.接下來我...

_ang 2019-08-22 18:14 評論0 收藏0
基于Vue、vue-i18n實現國際化（多語言）

摘要：在中引入調用第三方插件新建一個對象默認語言配置語言選項是一個配置語言包文件和語言選項的文件，文件內容大致如下語言包列表合并語言包是一個函數，判斷當前設置的語言類型，如果沒有設置語言，則根據判斷是中文還是非中文，非中文則顯示英語。 vue-i18n官網 https://kazupon.github.io/vue... 項目用vue-cli構建，用到vue全家桶及webpack、iview...

smallStone 2019-08-23 14:30 評論0 收藏0
Vue國際化處理 vue-i18n 以及項目自動切換中英文

摘要：直接上預覽鏈接國際化處理以及項目自動切換中英文環境搭建命令進入項目目錄，執行以下命令安裝國際化插件項目增加國際化翻譯文件在項目的下添加文件夾增加中文翻譯文件以及英文翻譯文件，里面分別存儲項目中需要翻譯的信息。 0. 直接上預覽鏈接 Vue國際化處理 vue-i18n 以及項目自動切換中英文 1. 環境搭建命令進入項目目錄，執行以下命令安裝vue 國際化插件vue-i18n...

wangtdgoodluck 2019-08-26 11:51 評論0 收藏0
vue-i18n結合Element-ui的配置

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

孫淑建 2019-08-26 13:51 評論0 收藏0
前端國際化之Vue-i18n源碼分析

摘要：最近的工作當中有個任務是做國際化。下文有對的源碼進行分析。因為英文的閱讀方向也是從左到右，因此語言展示的方向不予考慮。服務端數據翻譯前端樣式的調整中文轉英文后部分文案過長圖片第三方插件地圖等中文轉英文后肯定會遇到文案過長的情況。最近的工作當中有個任務是做國際化。這篇文章也是做個簡單的總結。部分網站的當前解決的方案不同語言對應不同的頁面。在本地開發的時候就分別打包輸出了不同語言版...

不知名網友 2019-08-20 15:14 評論0 收藏0