vue-i18n 多语言版本处理

1. 安装vue-i18n

npm install vue-i18n

2.在main.js中引入并使用

 import  VueI18n from 'vue-i18n'
 Vue.use(VueI18n)
 const  i18n = new VueI18n({
     locale: 'zh',          //默认语言
     message: {
         'zh': require('./lang/zh'),
         'en': require('./lang/en')
     }
 })

3.创建语言文件夹

我是在main.js的同级目录下新建了一个lang目录，并在下面新建了zh.js和en.js

zh.js内容如下

module.exports = {
   language:'中文'，
   nav:{
       home: '首页'，
       company:' 公司'
   }
}

en.js内容如下

module.exports = {
   language:'english'，
   nav:{
       home: 'Home'，
       company:' Company'
   }
}

4.在html中使用i18n
在html中使用

<nav> {{ $t('nav.home') }}  </nav>

在js中使用

data(){
  return {
      home:this.$t('nav.home')
  }
}

至此，语言切换已基本实现。
下面是使用localStorage存储变更语言到浏览器，方便下次浏览时，采用用户上次选择的语言来展示页面

5.以下是使用cookie记录用户浏览页面时使用的语言习惯
5.1 安装js-cookie

npm  install js-cookie

5.2 存取cookie信息

我是在lang下新建一个lang.js, 用于存取语言信息

lang.js如下

export default {
   setLang(lang){
      window.localStorage.setItem('user_lang',lang)
  },
  getLang(defaultLang)
     let  localLang = window.localStorage.getItem('user_lang')
     if( localLang === null  ){
         defaultLang = defaultLang || 'en'          //如果没有传入参数，则默认en
         return defaultLang
     }else{
        return  localLang
     }
}

5.3 执行set
在components中先import

import LangStorage from '../lang/lang'

然后在函数中调用set

changeLang(lang){
     langStorage.setLang(lang)         //存储语言
     this.$router.go(0)                      //重新加载页面
}

5.4 调用get, 设置初始值
在main.js修改初始值设置
第一步，引入lang

import LangStorage from '../lang/lang'

第二步，修改locale,设置初始值为用户上次浏览时所用的语言版本

 const  i18n = new VueI18n({
     locale: LangStorage.getItem('en'),          //默认语言修改如下
     message: {
         'zh': require('./lang/zh'),
         'en': require('./lang/en')
     }
 })

*在components中想获取语言信息时，可直接引入lang.js,再执行其getItem方法，也可以直接将i18n挂载到vue实例上，即在main.js的new Vue（{ }）中添加设置 i18n，随后在components中，调用this.$i18n.locale获取语言信息。

[参考链接] (https://www.jianshu.com/p/cc4253745b0f)
感谢指导