前端框架Vue.js——vue-i18n ，vue項目中如何實現國際化

 

本項目利用  VueI18n 組件進行國際化，使用以前，須要進行安裝

$ npm install vue-i18n

 

 

1、框架引入步驟：

1. 先在 main.js 中引入 vue-i18n。

　　

// 國際化插件
import utils from '@/config/cookieUtils'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n) // 經過插件的形式掛載

let currentLang = utils.get('CurrentLang')
if (currentLang !== 'en-US') {
  currentLang = 'zh-CN'
}
const i18n = new VueI18n({
  locale: currentLang,    // 語言標識
  // this.$i18n.locale // 經過切換locale的值來實現語言切換
  messages: {
    'zh-CN': require('./lang/zh'),   // 中文語言包
    'en-US': require('./lang/en')    // 英文語言包
  }
})

                       

 

 2.   建立語言包文件

             

 

　　　　　　zh.js  代碼：

　　　　　　

export const m = {
  home_page: '首頁',
  app_center: '應用中心',
  document_center: '文檔中心',
  document: '文檔',
  plat_des: '平臺概述',
  API_des: 'API 簡介',
  front_comp: '前端組件',
  ability_comp: '能力組件',
  jicheng_center: '集成中心',
  common_problem: '常見問題',
  api_interface: 'API接口',
  manager_controlle: '管理控制檯',
  service_controlle: '服務治理平臺',
  more: '更多',
  haopingRank: '好評排行',
  visitRank: '訪問排行',
  downloadRank: '下載排行'
}

    en.js

    

export const m = {
  home_page: 'Home',
  app_center: 'App Center',
  document_center: 'Document',
  document: 'Document',
  plat_des: 'Introduction',
  API_des: 'API Introduction',
  front_comp: 'Front Component',
  ability_comp: 'Ability Component',
  jicheng_center: 'Integration Center',
  common_problem: 'Normal Problem',
  api_interface: 'API Interface',
  manager_controlle: 'Control',
  service_controlle: 'Service Manage Control',
  more: 'More',
  haopingRank: 'Ping Rank',
  visitRank: 'Visit Rank',
  downloadRank: 'Download Rank'
}

 

 3. 實現語言切換

data () {
      return {
        lang: utils.get('CurrentLang')
      }
    },

 

<a @click="changeLangEvent()" style="float:right; color:#fff;">切換語言</a>

changeLangEvent: function () {
        this.$confirm('肯定切換語言嗎?', '提示', {
          confirmButtonText: '肯定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 切換語言
          if (this.lang === 'zh-CN') {
            this.lang = 'en-US'
          } else {
            this.lang = 'zh-CN'
          }
          this.$i18n.locale = this.lang // 關鍵語句
          utils.set('CurrentLang', this.lang)
        }).catch(() => {
          this.$message({
            type: 'info'
          })
        })
      }

 

4. 接口層面實現多語言，方案爲： 在HTTP請求頭中攜帶語言信息，接口服務根據語言，返回不一樣的語言環境響應體。

    本項目  vue.js 使用了  axios  組件，實現的話就統一在HTTP請求request攔截器中處理，代碼以下：

     

// http request 攔截器
axios.interceptors.request.use(
  config => {
    // 語言環境設置
    let currentLang = utils.get('CurrentLang')
    if (currentLang === 'en-US') {
      config.headers['X-Client-Language'] = 'en-US'
    } else {
      config.headers['X-Client-Language'] = 'zh-CN'
    }
    return config
  },
  err => {
    return Promise.reject(err)
  })

 

 

　　以上幾個步驟就實現了前端的國際化框架引入。如下就是須要對每一個有文字顯示的地方進行處理。

 

 

2、文字顯示調用方式：

　　1.  直接顯示

　　

        <router-link to="/index">{{$t('m.home_page')}}</router-link>

 

       2. 綁定方式調用：

    

<span v-text="$t('m.home_page')"></span>

 

 

　　3.JS調用字段值

this.$i18n.messages[this.$i18n.locale].m.manual

vm.$i18n.messages[vm.$i18n.locale].m.manual

 

 

3、Element-UI 組件的國際化

 

1. 在main.js中引入

 

import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import locale from 'element-ui/lib/locale'


2. 語言包判斷

if (currentLang === 'en-US') {  import('../static/css/en.css')  Vue.use(ElementUI, {enLocale})  locale.use(enLocale)} else {  Vue.use(ElementUI, {zhLocale})  locale.use(zhLocale)}