如何让你的系统支持多语言国际化？

背景：我们生活在一个全球化的时代，各国贸易越来越频繁。做一个支持多语言的系统是一个强大系统的充分不必要条件。如果一套系统有不同国家的用户，支持多语言可以给不同国家的用户带来使用方便。

vue项目中的多语言支持使用的是vue-i18n，

可参考：kazupon.github.io/vue-i18n/zh…

vue-i18n给我们做多语言国际化带了了便捷。

如何使用：

        1.下载依赖包
        2.引入插件包，引入语言包，创建国际化插件的实例，配置语言关系，导出i18n
        3.在main.js中挂载 i18n的插件
        4.修改locale属性
        5.用$t()渲染组件
        

步骤：

1.下载依赖包 ：

vue-i18n新版本对应的api有些不兼容，所以这里还是用的8.22.2这个版本

npm i vue-i18n@8.22.2 或者yarn add vue-i18n@8.22.2

2.引入插件包，引入语言包，创建国际化插件的实例，导出i18n

(2.1)这里我在src/lang/index.js里先导入vue-i18n，导入语言包。

import VueI18n from 'vue-i18n
import locale from 'element-ui/lib/locale'
import elementEN from 'element-ui/lib/locale/lang/en' 
import elementZH from 'element-ui/lib/locale/lang/zh-CN'
import customZH from './zh'
import customEN from './en'
Vue.use(VueI18n) // 全局注册国际化包`

(2.2) 创建国际化插件的实例(依旧是在src/lang/index.js里面)

  // 指定语言类型
  locale: 'zh',
  messages: {
    en: {
      ...elementEN, // 将饿了么的英文语言包引入
      ...customEN   // 将自定义英文包加入
    },
    zh: {
      ...elementZH, // 将饿了么的中文语言包引入
      ...customZH   // 将自定义中文包加入
    }
  }
})

(2.3)配置语言关系，导出实例

// 配置elementUI 语言转换关系
locale.i18n((key, value) => i18n.t(key, value))

export default i18n //导出实例

3.在main.js里挂载i18n的插件

import i18n from '@/lang'
// 加入到根实例配置项中
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

4.修改locale属性

在实际工作中，一般设置一个按钮或者下拉框来动态切换语言种类，如:中英文切换

5.渲染页面

如果是自定义语言包，可以用插槽将$t('数据')渲染到页面中，实现页面的不同语言。