目錄概述1、main入口函數(shù)支持2、界面處理實(shí)現(xiàn)概述

VUE+Element 前端應(yīng)用實(shí)現(xiàn)國(guó)際化的處理還是非常方便的，一般在Main.js函數(shù)里面引入語(yǔ)言文件，然后在界面上進(jìn)行一定的處理，把對(duì)應(yīng)的鍵值轉(zhuǎn)換為對(duì)應(yīng)語(yǔ)言的語(yǔ)義即可。本篇隨筆介紹在VUE+Element 前端應(yīng)用中如何實(shí)現(xiàn)在界面快速的支持多語(yǔ)言國(guó)際化的處理邏輯代碼。

1、main入口函數(shù)支持

Element 組件內(nèi)部默認(rèn)使用中文，若希望使用其他語(yǔ)言，則需要進(jìn)行多語(yǔ)言設(shè)置。以英文為例，在 main.js 中：

// 完整引入 Elementimport Vue from ’vue’import ElementUI from ’element-ui’import locale from ’element-ui/lib/locale/lang/en’Vue.use(ElementUI, { locale })

由于我們現(xiàn)在是需要處理多語(yǔ)言的切換，那么，我們?cè)趕rc下面的一個(gè)目錄里面創(chuàng)建一個(gè)lang目錄，在其中里面編輯zh.js和en.js分別代表中英文語(yǔ)言對(duì)照信息，index.js文件則為引入這兩個(gè)文件的處理關(guān)系。

在index.js里面，需要設(shè)置一個(gè)函數(shù)，用來(lái)獲取Cookie里面存儲(chǔ)的語(yǔ)言，如果沒(méi)有找到，以瀏覽器國(guó)際化語(yǔ)言為準(zhǔn)，如下代碼所示。

export function getLanguage() { const chooseLanguage = Cookies.get(’language’) if (chooseLanguage) return chooseLanguage // 如果沒(méi)有選擇語(yǔ)言，那么使用瀏覽器語(yǔ)言 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對(duì)象里面的鍵，如下所示。

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 langimport elementZhLocale from ’element-ui/lib/locale/lang/zh-CN’// element-ui langimport enLocale from ’./en’import zhLocale from ’./zh’Vue.use(VueI18n)// 定義對(duì)應(yīng)語(yǔ)言鍵，展開(kāi)對(duì)應(yīng)的鍵值對(duì)應(yīng)表const messages = { en: { ...enLocale, ...elementEnLocale }, zh: { ...zhLocale, ...elementZhLocale }}

其中message就是一個(gè)兩個(gè)語(yǔ)言（en/zh）字典下的對(duì)照表，包含各自對(duì)應(yīng)鍵值下的內(nèi)容。

然后整個(gè)index.js文件就是公布對(duì)應(yīng)的多語(yǔ)言處理接口和屬性。

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

然后在main.js函數(shù)里面處理國(guó)際化的處理即可

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

有了這些準(zhǔn)備，那么我們?cè)诮缑嫔暇涂梢哉{(diào)用對(duì)應(yīng)的鍵來(lái)獲取對(duì)應(yīng)語(yǔ)言的語(yǔ)義了，

2、界面處理實(shí)現(xiàn)

首先，我們編輯一下對(duì)應(yīng)國(guó)際化的鍵值內(nèi)容，例如中文參照如下所示。

例如對(duì)應(yīng)登錄界面上，界面效果如下所示。

或者

其中里面的文本內(nèi)容，我們都是以國(guó)際化處理內(nèi)容。

如登陸表單里面的代碼如下所示。

<el-form ref='loginForm' :model='loginForm' :rules='rules' class='loginForm'> <el-form-item prop='username' class='login-item'> <el-input v-model='loginForm.username' 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' 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' @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>

我們多處采用了類(lèi)似$t(’login.username’) 的函數(shù)處理方式來(lái)動(dòng)態(tài)獲取對(duì)應(yīng)語(yǔ)言的內(nèi)容即可，其中$t(）函數(shù)里面就是對(duì)應(yīng)的語(yǔ)義解析的鍵參數(shù)，對(duì)應(yīng)我們lang/zh.js里面或者lang/en.js里面的內(nèi)容即可。

其中多語(yǔ)言切換的時(shí)候，單擊圖標(biāo)就可以切換為其他語(yǔ)言?xún)?nèi)容了。

切換英文后界面如下所示

同樣，其他地方，如果需要切換多語(yǔ)言的國(guó)際化處理，也可以使用$t的轉(zhuǎn)義方式，在頂部導(dǎo)航欄里面，我們可以設(shè)置得到多語(yǔ)言支持的界面。

中文界面提示如下所示。

這部分的實(shí)現(xiàn)代碼是在組件模塊里面，一樣可以實(shí)現(xiàn)國(guó)際化的處理的。

<template v-if='device!==’mobile’'> <search /> <error-log /> <el-tooltip :content='$t(’navbar.fullscreen’)' effect='dark' placement='bottom'> <screenfull /> </el-tooltip> <el-tooltip :content='$t(’navbar.size’)' effect='dark' placement='bottom'> <size-select /> </el-tooltip> <el-tooltip :content='$t(’navbar.language’)' effect='dark' placement='bottom'> <lang-select /> </el-tooltip> </template>

以上就是Vue Element前端應(yīng)用開(kāi)發(fā)之界面語(yǔ)言國(guó)際化的詳細(xì)內(nèi)容，更多關(guān)于Vue Element之界面語(yǔ)言國(guó)際化的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！