Vue2 + vue-i18n@8 多语言切换

1、下载vue-i18n: 

npm i vue-i18n@8 // vue2必须安装8版本的i18n包，vue3必须安装9版本的i18n包。

***注：后续element-ui相关的国际化语言，可用可不用。***

2、新建三个语言相关文件：

2.1、index.js:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import locale from 'element-ui/lib/locale'
import zh from './zh'
import en from './en'

Vue.use(VueI18n)

let i18n = new VueI18n({
  locale: localStorage.getItem('language') || 'zh',
  messages: {
    'zh': {
      ...zh
    },
    'en': {
      ...en
    }
  }
})
locale.i18n((key, value) => i18n.t(key, value))
export default i18n;

2.2、en.js:

import enLocale from 'element-ui/lib/locale/lang/en'
export default {
  language: {
    home: 'home page',
    name: "I'm six",
    ...enLocale,
  }
}

2.3、zh.js:

import zhLocale from 'element-ui/lib/locale/lang/en'
export default {
  language: {
    home: '首页',
    name: '我是老六',
    ...zhLocale,
  }
}

3、main.js:

import App from './App.vue'
import i18n from './lang'
new Vue({
  i18n,
  render: function (h) {
    return h(App)
  }
}).$mount('#app')

4、多语言使用、多语言切换 -- index.vue:

<template>
  <div>
    <div>
      <div @click="handEvent('zh')">中文</div>
      <div @click="handEvent('en')">英文</div>
    </div>
    <div>
      {{ $t("home") }}
      {{ $t("name") }}
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    handEvent(type) {
      localStorage.setItem("language", type);
      this.$i18n.locale = type; //这个代码负责实时切换语言
    }
  }
}
</script>