JavaScript 您现在的位置是:首页 > 开发笔记 > JavaScript

Element UI 结合VueI18n实现国际化

来源:惠达浪原创 发布时间:2021-03-22 最后更新:2021-03-22 1292已围观

摘要最后一个项目中,要多语言表现,前后端都使用了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 中导入的,我放在了平级文件夹下。

image.png

各文件内容如下:

// 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: '个人中心'
}


很赞哦! (124)


站点信息

  • 网站平台ThinkCMF 5.1.5
  • PHP版本:7.3.31
  • QQ交流群: 惠达浪技术交流