vue实现多语言项目（vue-i18n）

首先安装vue-i18n依赖（npm）

npm install vue vue-i18n --save

vue-i18n官方文档地址：http://kazupon.github.io/vue-i18n/zh/introduction.html

在vue项目src文件夹下新建一个 i18n 文件夹存放i18n要用的文件

在创建一个lang文件夹存放你需要的语言包

//cn.js
module.exports = {
  lange: {
    cn:'中文',
    en:'英文',
    jp:'日文',
    kr:'韩文'  
  }
}

创建一个index.js来配置i18n

import VueI18n from 'vue-i18n'   //引入vue-i18n
import Vue from 'vue'

Vue.use(VueI18n)
var locale;
localStorage.getItem('locale') ? locale = localStorage.getItem('locale') : locale = 'cn';
const i18n = new VueI18n({
  locale: locale,    // 语言标识
  messages: {
    'cn': require('./lang/cn'),   // 中文语言包
    'en': require('./lang/en'),   // 英文语言包
    'jp': require('./lang/jp'),   // 日文语言包
    'kr': require('./lang/kr')    // 韩文语言包
  },
})

export default  i18n

这里讲解一下为什么上面要用到localStorage.getItem('locale')，因为vue整个项目都是多语言的，做本地存储的目的是希望在被刷新的时候依然不会改变当前选中的语言，下面会做进一步讲解（如果有更好的方法欢迎交流讨论）

还需要在main.js引入i18n并具名在vue

import i18n from './i18n'  //引入i18n
new Vue({
  el: '#app',
  router,
  i18n,  //这里需要具名
  store,
  components: { App },
  template: '<App/>'
})

写一个lange.vue来做多语言切换（集体怎么写就不多说了，说重要部分）

data钩子里写要切换的list，$t("language.cn")就是i18n自动匹配需要翻译的语言，在html上的写法{{$t("language.cn")}}

list: [
  {type:'cn',name:this.$t("language.cn"),id:1},
  {type:'en',name:this.$t("language.en"),id:2},
  {type:'jp',name:this.$t("language.jp"),id:3},
  {type:'kr',name:this.$t("language.kr"),id:4},
]

最后在选择确认哪一种语言时，需要将上面的type（eg: cn / en / jp / kr）存入到i18n的locale，这样一来会马上执行匹配当前的语言,除此之外还需要将type存入本地，为了防止刷新后所选择的语言包不是当前的语言包(对上面进行进一步的解说)

this.$i18n.locale = this.locale;  //修改i18n的locale值，
localStorage.setItem('locale',this.locale);  //存入本地的locale值