在公司工作时遇到要将项目国际化的问题，对于vue的项目进行国际化我们一般用vuei18n框架，下面我就来介绍一下如何使用此框架做国际化。
首先国际化最起码的就是要将网站的语言切换成多语言，其中有两种实现方式，第一种是将多语言文件配置在前端，第二种是从后台拉取对应的语言文件，这两种方式各有优劣，选择一个适合的就行。第一种的优势是不用发请求，只要网站对应的文件加载完成，将随时能够切换语言，不会有接口报错或者网络问题导致语言切换不了的问题，但缺点就是不够灵活，第二种方式刚好与他相反。在这里我就不多说了。
安装
npm install vue-i18n
yarn add vue-i18n
在前端配置的方式
在前端配置多语言文件可以抽离成我这种格式，分模块配置，看起来结构清楚
在zh文件夹下面的index中导入其他模块的文件如下图：
在lang文件夹下的index中配置vuei18n如图：
这里为了记住当前选择的语言环境所以用了localstorage保存语言标识，然后在main.js中导入这个文件，然后挂在在vue实例上，如图：
这样配置工作就已经完成了，你只需在单文件组件中使用就行了。例如：
<h1>$t('hello')</h1>
注意
在某些情况下我们需要把文件配置在data中，但当你切换语言的时候由于data只会渲染一次，所以data里面的数据不会变化，官方给出的解决方案是把写在data里面的数据写在computed中，但是当页面结构很复杂的时候computed里面的结构会非常复杂，所以我的解决方案是当切换语言的时候手动刷新一下页面。
location,onload()
通过后台拉取数据的方式
在vuei18n框架中有两个方法，可以把后台接口拉取到的数据合并到框架内部的语言环境中。
setLocaleMessage( locale, message )
- 参数：
{Locale} locale{LocaleMessageObject} message
设置语言环境的 locale 信息
mergeLocaleMessage( locale, message )
- 参数：
{Locale} locale{LocaleMessageObject} message
将语言环境信息 locale 合并到已注册的语言环境信息中。
setLocaleMessage和mergeLocaleMessage的区别是，setLocaleMessage会重设框架的语言环境，如果在调用这个方法之前语言环境里面有文件那么会覆盖这个文件，mergeLocaleMessage不会覆盖掉他只会合并两个文件，所以当你既要做网站的多语言，又需要element框架的国际化时，就需要用mergeLocaleMessage。
具体的使用方法如下：
当通过接口拉取到语言环境对象时，通过this.$i18n.mergeLocaleMessage('zh_cn',res.obj)或this.$i18n.setLocaleMessage('zh_cn',res.obj) 合并语言环境之后再通过this.$i18n.locale='zh_cn'切换语言。
