使用 vue-i18n 進行Vue國際化處理，使項目切換中英文（摘抄）

1.下載安裝插件

命令進入項目目錄，執行以下命令安裝vue 國際化插件vue-i18n

npm install vue-i18n --save

2. 項目增加國際化翻譯文件

在項目的src下添加lang文件夾增加中文翻譯文件（zh.js）以及英文翻譯文件（en.js），里面分別存儲項目中需要翻譯的信息。

 

 en.js 英文語言包：

export const m = { 
  // 導航欄
  navbar:{
    HOME:'HOME',
    ABOUTUS:'ABOUT US',
    SERVICES:'SERVICES',
    LIVERATE:'LIVE RATE',
    NEWS:'NEWS',
    CONTACTUS:'CONTACT US'
  },
  // 底部
  footer:{
    CONTACTUS:'CONTACT US',
    WEBSITENAVIGATION:'WEBSITE NAVIGATION',
    ABOUTUS:'ABOUT US',
    OURSERVICES:'OUR SERVICES',
    NEWS:'NEWS',
    LIVERATE:'LIVE RATE',
    CUSTOMERSERVICE:'CUSTOMER SERVICE',
    WECHAT:'WECHAT'
  },
  // 首頁
  index:{
    SERVICES:'SERVICES',
    NEWS:'NEWS',
    GOLDMATENEWS:'GOLDMATE NEWS',
    MARKETINSIGHT:'MARKET INSIGHT',
    KUNDAX:'KUNDAX',
    GOLDMATE:'GOLDMATE',
    GOLDMATEGROUP:'GROUP',
    KUNDAGROUP:'GROUP'
  }
}

zh.js 中文語言包

export const m = { 
  // 導航欄
  navbar:{
    HOME:'首頁',
    ABOUTUS:'關於我們',
    SERVICES:'主營業務',
    LIVERATE:'實時匯率',
    NEWS:'最新資訊',
    CONTACTUS:'聯系我們'
  },
  // 底部
  footer:{
    CONTACTUS:'聯系我們',
    WEBSITENAVIGATION:'網站地圖',
    ABOUTUS:'關於我們',
    OURSERVICES:'主營業務',
    NEWS:'最新資訊',
    LIVERATE:'實時匯率',
    CUSTOMERSERVICE:'客服熱線',
    WECHAT:'微信公眾號'
  },
  // 首頁
  index:{
    SERVICES:'主營業務',
    NEWS:'最新資訊',
    GOLDMATENEWS:'公司要聞',
    MARKETINSIGHT:'匯市動態',
    KUNDAX:'坤達速匯',
    GOLDMATE:'中聯匯兌',
    GOLDMATEGROUP:'中聯集團介紹',
    KUNDAGROUP:'坤達集團介紹'
  }
}

3. 項目引入

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
    locale: 'zh-CN',    // 語言標識
    //this.$i18n.locale // 通過切換locale的值來實現語言切換
    messages: {
      'zh-CN': require('./lang/zh'),   // 中文語言包
      'en-US': require('./lang/en')    // 英文語言包
    }
})
new Vue({
    el: '#app',
    router: router,
    i18n,// 不要忘記
    render: h => h(App),
    mounted () {
    },
    created () {
    }
});

　

上面的代碼正式將 vue-i18n 引入 vue 項目中，創建一個 i18n 實例對象，方便全局調用。我們通過 this.$i18n.locale 來進行語言的切換。當 locale 的值為‘zh-CN’時，版本為中文；當 locale 的值為‘en-US’,版本為英文。當然你也可以換成 zh 和 en，這個不固定，只需要對應上。

4. 語言切換

// 切換語言
    changeLanguage() {
      if (this.language == "zh-CN") {
        this.language = "en-US";
        this.$i18n.locale = this.language; //關鍵語句
        this.addCookie("lang", this.language);
      } else {
        this.language = "zh-CN";
        this.$i18n.locale = this.language; //關鍵語句
        this.addCookie("lang", this.language);
      }
      location.reload();
}

this.$i18n.locale,當你賦值為‘zh-CN’時，就變成中文；當賦值為 ‘en-US’時，就變成英文。

5.vue-i18n 數據渲染的模板語法

我們知道 vue 中對於文字數據的渲染，有以‘’{{}}‘’或者 v-text、v-html等的形式，同樣的使用國際化后，依舊可以沿用，但需要一點修改

//v-text:
<span v-text="$t('m.navbar.HOME')"></span>
 
//{{}}:
<span>{{$t('m.navbar.HOME')}}</span>

6.iview組件中的中英文切換

<FormItem :label="$t('m.exchangeRate.Rate')" prop="exchangeRate">
              <Input clearable class="longInput" v-model="formValidate.exchangeRate" :placeholder="$t('m.exchangeRate.input')"></Input>
</FormItem>

　

7.如何實現整個項目語言切換

（1）所有獲取數據的接口提供一個參數用於獲取中文或英文的數據

（2）固定的展示文字的放入語言包中切換即可

（3）將當前語言類型存入cookie中

（4）進入頁面即獲取cookie中的語言類型去設置請求數據的接口所對應語言的參數

（5）切換語言時，首先判斷當前語言是中文還是英文，並做對應的切換，最后將切換的語言存入cookie中

（6）問題：當前頁面的接口無法切換語言

解決：重新刷新頁面即可

 

原文地址：https://blog.csdn.net/qq_40542728/article/details/92661059