Vue-i18n 结合iview国际化的使用，以及一些疑问

环境（iview UI也要适配国际化)

由于项目要求系统支持国际化，故需要在原来的项目中添加vue-i18n包（之前用了vuex-i18n, 但是不知道怎么样去动态改变iview的国际化，如果有大佬知道恳请告知)。

配置国际化

在package.json添加vue-i18n
"vue-i18n": "^8.11.2"

在main.js中配置国际化

1. 创建本地 zh.js 以及 en.js
   en.js

   LOCATION_ERROR: Location Error
   QUANTITY_ERROR: Quantity Error
   REPEAT_QR_CODE: Repeat QR Code
   SCAN_HISTORY: Scan History
   

   zh.js

   LOCATION_ERROR: 地址错误
   QUANTITY_ERROR: 数量错误
   REPEAT_QR_CODE: 重复扫码
   SCAN_HISTORY: 扫码历史
   

2. 导入iview和i18n以及两个本地中英文js文件和iview自带的语言js

   import zh from '@/locales/lang/zh.js'    //注意路径改成你创建的路径
   import en from '@/locales/lang/en.js'    //注意路径改成你创建的路径
   import ien from 'iview/dist/locale/en-US'
   import izh from 'iview/dist/locale/zh-CN'
   

3. 配置i18n

   Vue.use(VueI18n)
   Vue.locale = () => {}
   const messages = {
     'en-US': Object.assign(zh, izh),
     'zh-CN': Object.assign(en, ien)
   }
   const i18n = new VueI18n({
     locale: localStorage.getItem("locale") } || 'zh-CN',  // 从localStorage中获取，如果没有则设置中文
     messages  // set locale messages
   })
   Vue.use(iView)
   

   按照iview官网这样配置后，发现iview组件的国际化并没有生效，不知道什么原因（求解，完全按照官网来配置的），因此参考别人的博客，发现一种解决方案，把上面的最后一段代码替换成下面这样,就可以成功了。

   Vue.use(iView, {
     i18n: (key, value) => i18n.t(key, value)
   })
   

   最后别忘了添加到vue中去，不然不生效

   new Vue({
     el: '#app',
     i18n,
     router,
     store,
     render: h => h(App)
   })
   

4. vue文件中
   添加点击事件

   
     {{localeLanguage}}
   
   

   设置data

   data(){
   	return{
   		localeLanguage : localStorage.getItem('locale') === 'en-US' ? '中文' : 'EN'
   	}
   }
   

   js方法，存入localStorage中

   changeLanguage() {
       if (this.$i18n.locale === 'en-US') {
         this.$i18n.locale = 'zh-CN'
         this.localeLanguage = '中文'
       } else if (this.$i18n.locale === 'zh-CN') {
         this.$i18n.locale = 'en-US'
         this.localeLanguage = 'EN'
       }
       localStorage.setItem('locale', this.$i18n.locale)
   

由于项目中的一些私密信息不方便直接贴上代码，所以上面的代码很多是直接手写，所以可能会有一些错误，但是原理就是这个原理。如果有任何的错误，非常抱歉，请您指出来。