JavaScript 您现在的位置是:首页 > 开发笔记 > JavaScript
Element UI 结合VueI18n实现国际化
来源:惠达浪原创
发布时间:2021-03-22
最后更新:2021-03-22
5279已围观
摘要最后一个项目中,要多语言表现,前后端都使用了VUE + Element UI,并使用vue-i18n实现了多语言表现,特此记录。
即是博客,也是笔记,废话没有,直入主题!
目标:项目国际化,前端多语言切换,新增语言时,不必改动原有代码,只需新增语言包即可。
构思:单独建立一个文件夹,专门存放语言相关代码。同时,最小化对main.js的改动,以免造成代码冗余。
实现:
1、确保安装了 Element UI 和 vue-i18n,不需要Element UI的,直接安装vue-i18n,或者只安装i18n都行。我安装的是 vue-i18n,版本是 8.24.1。
2、新建 language 文件夹,名字随意,存放地点随意。该文件夹用来盛放所有与语言相关的内容,方便管理。因此所谓的随意并非真的随意,而是与项目管理息息相关。
3、在 language 文件夹下,新建 index.js 文件,该文件最终将在 main.js 中引入,即完成所有语言功能。
4、在 language 文件夹下,新建语言包主文件,以中英文为例,zh-cn.js为中文包,en.js为英语包。我考虑还有可能是繁体中文cn-tw,所以中文包没有使用cn命名。当然,我还建了子语言包文件夹,中文为 chinese,英文为 english,主要为了模块化语言包或者团队合作。语言包主文件位置随意,反正都是在 index.js 中导入的,我放在了平级文件夹下。
各文件内容如下:
// index.js import Vue from 'vue' import VueI18n from 'vue-i18n' // 加载Element UI的语言包,不用Element UI的话,下面3行忽略 import ElementLocale from 'element-ui/lib/locale' import enLocale from 'element-ui/lib/locale/lang/en' import zhLocale from 'element-ui/lib/locale/lang/zh-CN' // 加载自定义的语言包 import enLang from '@/language/en' import zhLang from '@/language/zh-cn' // 这行再需要解释的话,就不必再往下看了,学vue去吧 Vue.use(VueI18n) // 从 localStorage 中读取已经设置的语言(在语言切换处设置),默认是中文 const locale = window.localStorage.getItem('language') || 'zh' // 新建i18n实例,语言包为Element UI和自定义的组合。 // 注意,我故意将Element UI的语言包放在后边,目的是重名的情况下,以Element UI为准 const i18n = new VueI18n({ locale, messages: { 'zh': { ...zhLang, ...zhLocale }, 'en': { ...enLang, ...enLocale } } }) // 这段是Element UI文档的原代码,照抄过来的。不使用Element UI的话,此行忽略 ElementLocale.i18n((key, value) => i18n.t(key, value)) export default i18n /** * 将搜索出来的文件内容转换成语言包格式(制作成函数以便复用) * @param {function} langFiles require.context返回的函数 * @return {*} */ export function makeLanguages(langFiles) { return langFiles.keys().reduce((lang, langPath) => { const langName = langPath.replace(/^\.\/(.*)\.\w+$/, '$1') const value = langFiles(langPath) lang[langName] = value.default return lang }, {}) }
再来看语言包
// zh-cn.js import { makeLanguages } from '@/language' // path 为子语言包所在文件夹,如不需要则忽略。 // 有时为了方便管理或者团队合作,要把语言包分开来写,因此在 language 下再建子语言包文件夹,即示例中的 chinese文件夹 const path = './chinese' // 自动挂载子语言包 const languages = makeLanguages(require.context(path, true, /\.js$/)) // 本文件内容与子语言包内容合并 // 我个人习惯是在此写入全局语言包,其它模块的写在子文件夹中。如果你的语言包不大,则不需要上边的代码,直接都写在此即可 const zh = { webLang: '简体中文', // 1级定义,通常用于全局,因此写在主文件中 ...languages } export default zh
// en.js 内容和上边一样,不再解释 import { makeLanguages } from '@/language' const path = './english' const languages = makeLanguages(require.context(path, true, /\.js$/)) const en = { webLang: 'English', ...languages } export default en
注:我试图将require也放到函数中,但未成功。由于不太懂前端,不明白原因在哪里。
至于子语言包,内容更简单,就是单纯地导出一个对象,例如:
// chinese/common.js export default { personalCenter: '个人中心' }
很赞哦! (428)
上一篇: wind.js助力异步编程
站点信息
- 网站平台:ThinkCMF 5.1.5
- PHP版本:7.3.31
-
QQ交流群:
惠达浪技术交流