按部就班VUE+Element 前端應用開發(9）--- 界面語言國際化的處理

時間 2020-06-19

標籤按部就班 vue+element vue element 前端應用開發界面語言國際化處理简体版

原文原文鏈接

咱們開發的系統，通常能夠不用考慮語言國際化的問題，大多數系統通常是給本國人使用的，並且直接使用中文開發界面會更加迅速一些，不過框架最好可以支持國際化的處理，以便在須要的時候，能夠花點時間來實現多語言切換的處理，使系統具備更普遍的受衆用戶。VUE+Element 前端應用實現國際化的處理仍是很是方便的，通常在Main.js函數裏面引入語言文件，而後在界面上進行必定的處理，把對應的鍵值轉換爲對應語言的語義便可。本篇隨筆介紹在VUE+Element 前端應用中如何實如今界面快速的支持多語言國際化的處理邏輯代碼。html

一、main入口函數支持

Element 組件內部默認使用中文，若但願使用其餘語言，則須要進行多語言設置。以英文爲例，在 main.js 中：前端

// 完整引入 Element
import Vue from 'vue'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'

Vue.use(ElementUI, { locale })

因爲咱們如今是須要處理多語言的切換，那麼，咱們在src下面的一個目錄裏面建立一個lang目錄，在其中裏面編輯zh.js和en.js分別表明中英文語言對照信息，index.js文件則爲引入這兩個文件的處理關係。vue

在index.js裏面，須要設置一個函數，用來獲取Cookie裏面存儲的語言，若是沒有找到，以瀏覽器國際化語言爲準，以下代碼所示。element-ui

export function getLanguage() {
  const chooseLanguage = Cookies.get('language')
  if (chooseLanguage) return chooseLanguage

  // 若是沒有選擇語言，那麼使用瀏覽器語言
  const language = (navigator.language || navigator.browserLanguage).toLowerCase()
  const locales = Object.keys(messages)
  for (const locale of locales) {
    if (language.indexOf(locale) > -1) {
      return locale
    }
  }
  return 'en'
}

其中代碼行後端

const locales = Object.keys(messages)

是獲取message對象裏面的鍵，以下所示。瀏覽器

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import enLocale from './en'
import zhLocale from './zh'

Vue.use(VueI18n)

// 定義對應語言鍵，展開對應的鍵值對應表
const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
}

其中message就是一個兩個語言（en/zh）字典下的對照表，包含各自對應鍵值下的內容。cookie

而後整個index.js文件就是公佈對應的多語言處理接口和屬性。app

const i18n = new VueI18n({
  locale: getLanguage(),
  messages
})

export default i18n

而後在main.js函數裏面處理國際化的處理便可框架

Vue.use(ElementUI, {
  size: Cookies.get('size') || 'medium', // set element-ui default size
  i18n: (key, value) => i18n.t(key, value) })

new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

有了這些準備，那麼咱們在界面上就能夠調用對應的鍵來獲取對應語言的語義了，函數

二、界面處理實現

首先，咱們編輯一下對應國際化的鍵值內容，例如中文參照以下所示。

例如對應登陸界面上，界面效果以下所示。

或者

其中裏面的文本內容，咱們都是以國際化處理內容。

如登錄表單裏面的代碼以下所示。

        <el-form ref="loginForm" :model="loginForm" :rules="rules" class="loginForm">
          <el-form-item prop="username" class="login-item">
            <el-input
              v-model="loginForm.username"
              class="area"
              type="text"
              :placeholder="$t('login.username')"
              prefix-icon="el-icon-user-solid"
              @keyup.enter.native="submitForm('loginForm')"
            />
          </el-form-item>
          <el-form-item prop="password" class="login-item">
            <el-input
              v-model="loginForm.password"
              class="area"
              type="password"
              :placeholder="$t('login.password')"
              prefix-icon="el-icon-lock"
              @keyup.enter.native="submitForm('loginForm')"
            />
          </el-form-item>

          <el-form-item>
            <el-button :loading="loading" type="primary" class="submit_btn" @click="submitForm('loginForm')">{{ $t('login.logIn') }}</el-button>
          </el-form-item>
          <div class="tiparea">
            <span style="margin-right:20px;">{{ $t('login.username') }} : admin</span>
            <span> {{ $t('login.password') }} : {{ $t('login.any') }}</span>
          </div>
        </el-form>

咱們多處採用了相似 $t('login.username') 的函數處理方式來動態獲取對應語言的內容便可，其中$t(）函數裏面就是對應的語義解析的鍵參數，對應咱們lang/zh.js裏面或者lang/en.js裏面的內容便可。

其中多語言切換的時候，單擊圖標就能夠切換爲其餘語言內容了。

切換英文後界面以下所示

一樣，其餘地方，若是須要切換多語言的國際化處理，也可使用$t的轉義方式，在頂部導航欄裏面，咱們能夠設置獲得多語言支持的界面。

中文界面提示以下所示。

這部分的實現代碼是在組件模塊裏面，同樣能夠實現國際化的處理的。

  <template v-if="device!=='mobile'">
    <search id="header-search" class="right-menu-item" />
    <error-log class="errLog-container right-menu-item hover-effect" />
    <el-tooltip :content="$t('navbar.fullscreen')" effect="dark" placement="bottom">
      <screenfull id="screenfull" class="right-menu-item hover-effect" />
    </el-tooltip>
    <el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
      <size-select id="size-select" class="right-menu-item hover-effect" />
    </el-tooltip>
    <el-tooltip :content="$t('navbar.language')" effect="dark" placement="bottom">
      <lang-select class="right-menu-item hover-effect" />
    </el-tooltip>
  </template>