Element UI 结合VueI18n实现国际化

即是博客，也是笔记，废话没有，直入主题！

目标：项目国际化，前端多语言切换，新增语言时，不必改动原有代码，只需新增语言包即可。

构思：单独建立一个文件夹，专门存放语言相关代码。同时，最小化对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: '个人中心'
}