2024年循序渐进VUE+Element 前端应用开发(9）--- 界面语言国际化的处理，前端面试题

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我特地针对初学者整理一套前端学习资料

我们开发的系统，一般可以不用考虑语言国际化的问题，大多数系统一般是给本国人使用的，而且直接使用中文开发界面会更加迅速 一些，不过框架最好能够支持国际化的处理，以便在需要的时候，可以花点时间来实现多语言切换的处理，使系统具有更广泛的受众用户。VUE+Element 前端应用实现国际化的处理还是非常方便的，一般在Main.js函数里面引入语言文件，然后在界面上进行一定的处理，把对应的键值转换为对应语言的语义即可。本篇随笔介绍在VUE+Element 前端应用中如何实现在界面快速的支持多语言国际化的处理逻辑代码。

1、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文件则为引入这两个文件的处理关系。

在index.js里面，需要设置一个函数，用来获取Cookie里面存储的语言，如果没有找到，以浏览器国际化语言为准，如下代码所示。

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）字典下的对照表，包含各自对应键值下的内容。

然后整个index.js文件就是公布对应的多语言处理接口和属性。

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)

})

2、界面处理实现

====================================================================

首先，我们编辑一下对应国际化的键值内容，例如中文参照如下所示。

例如对应登录界面上，界面效果如下所示。

或者

其中里面的文本内容，我们都是以国际化处理内容。

最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】