1.什么是多语言国际化？

简单来说就是让项目中的文字可以进行多国语言互译，一般是与国外合作开发项目或者是项目需要在国外上线用到的。刚好我正在做的项目就需要进行中英文转换，所以写篇文章给大家分享一下经验

1.有问题找Element

由于我这个项目是以Element组件库做的，所以在上面我就很快找到了做多语言国际化的方法，首先是需要导包

npm i vue-i18n@8.22.2

导包是跑不掉的哈，然后就是配置，引入插件包和全局注册，最后再创建实例

// 进行多语言支持配置
import Vue from 'vue' // 引入Vue
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' // 引入饿了么的中文包
Vue.use(VueI18n) // 全局注册国际化包

// 创建国际化插件的实例
const i18n = new VueI18n({
  // 指定语言类型 zh表示中文  en表示英文
  locale: 'zh',
  // 将elementUI语言包加入到插件语言数据里
  messages: {
    // 英文环境下的语言数据
    en: {
      ...elementEN
    },
    // 中文环境下的语言数据
    zh: {
      ...elementZH
    }
  }
})
// 配置elementUI 语言转换关系
locale.i18n((key, value) => i18n.t(key, value))

export default i18n

最后注意一定要在main.js 里面进行挂载很多人忘了最后一步导致出现bug

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

2.做中英转译文件

什么是转译文件呢，就是把项目里面的需要翻译的文字一一列出来，这个就不关咱们的事了，就得看你们公司找的小翻译靠不靠谱了

文件建好后将自定义包加入主文件中

// 引入自定义中文包
import customZH from './zh'
// 引入自定义英文包
import customEN from './en'

 messages: {
    // 英文环境下的语言数据
    en: {
      ...elementEN,
      ...customEN // 将自定义英文包加入
    },
    // 中文环境下的语言数据
    zh: {
      ...elementZH,
      ...customZH // 将自定义中文包加入
    }
  }

如果要切换语言的话只需要把 locale 后面的语言类型修改一下就可

3.在页面组件上进行渲染

体力活来了，我们在配置完文件注册好后就需要将项目中转译的文字全部都转换成以下形式，没听错是全部，我们在前面配置好了语言转换关系所以这里只需要用 $t进行转换

{{ $t('route.companyName') }} // 引号里面对应翻译包里面的名字

4.创建语言切换组件

渲染之后我们怎么切换呢？总不能在代码里面修改 locale 去进行转换吧~ 这个时候可以创建一个组件进行全局注册，最后把组件引用到主页中就大功告成了

<template>
  <el-dropdown trigger="click" @command="changeLanguage">
    <div>
      <svg-icon style="color:#fff;font-size:20px" icon-class="language" />
    </div>
    <!-- 样式可以根据自己项目所需进行修改 -->    
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="zh" :disabled="'zh'=== $i18n.locale ">中文</el-dropdown-item>
      <el-dropdown-item command="en" :disabled="'en'=== $i18n.locale ">en</el-dropdown-item>
    <!-- 选中语言后 将当前选中语言项 隐藏 -->    
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang // 设置给本地的i18n插件
      this.$message.success('切换多语言成功')
    }
  }
}
</script>

不要忘记了全局注册哦！

Element 内置语言

目前Element官网提供的语言是都可以下包使用的，使用方法和前面的是一样的

简体中文（zh-CN）
英语（en）
德语（de）
葡萄牙语（pt）
西班牙语（es）
丹麦语（da）
法语（fr）
挪威语（nb-NO）
繁体中文（zh-TW）
意大利语（it）
韩语（ko）
日语（ja）
荷兰语（nl）
越南语（vi）
俄语（ru-RU）
土耳其语（tr-TR）
巴西葡萄牙语（pt-br）
波斯语（fa）
泰语（th）
印尼语（id）
保加利亚语（bg）
波兰语（pl）
芬兰语（fi）
瑞典语（sv-SE）
希腊语（el）
斯洛伐克语（sk）
加泰罗尼亚语（ca）
捷克语（cs-CZ）
乌克兰语（ua）
土库曼语（tk）
泰米尔语（ta）
拉脱维亚语（lv）
南非荷兰语（af-ZA）
爱沙尼亚语（ee）
斯洛文尼亚语（sl）
阿拉伯语（ar）
希伯来语（he）
立陶宛语（lt）
蒙古语（mn）
哈萨克斯坦语（kz）
匈牙利语（hu）
罗马尼亚语（ro）
库尔德语（ku）
维吾尔语（ug-CN）
高棉语（km）
塞尔维亚语（sr）
巴斯克语（eu）
吉尔吉斯语（kg）
亚美尼亚语 (hy)
克罗地亚 (hr)
世界语 (eo)

最后献上Element传送门一个神秘的链接

如何在一个项目中使用多语言国际化？