i18n vue 多语言配置，切换刷新（setLocaleMessage，mergeLocaleMessage）

1.引入i18n插件

npm install i18n --save-dev

2.在main.js中挂载

import i18n from '@/plugins/i18n'
new Vue({
    i18n
}).$mount('#app')

3.创建i18n.js文件添加配置

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from '@/lang' // 语言包的地址，随项目本身设置修改
import ElementLocale from 'element-ui/lib/locale'

Vue.use(VueI18n)

if (localStorage.getItem('languageSet') === 'en') {
  document.getElementsByTagName('body')[0].style.fontFamily = 'Space Grotesk'
} else {
  document.getElementsByTagName('body')[0].style.fontFamily = ''
}

const lang = (localStorage.getItem('languageSet') || 'zh').toLowerCase()

export const i18n = new VueI18n({
  locale: lang, // 当前语言环境  this.$i18n.locale = 'en'
  fallbackLocale: 'zh', // 默认语言环境。如果locale中无匹配项则采用该项值
  messages, // 设置全局本地语言包（'en','zh'...） set locale messages 
  silentTranslationWarn: true
  //避免一些警告 (同时保留那些完全没有翻译给定关键字的警告)，需初始化 VueI18n 实例时设置
})

//以下两种方法 内部项目方法处理 不重要
i18n.setLang = (lang) => {//设置当前语言环境 
  i18n.locale = lang
  return lang
}
i18n.setTitle = (lang) => {
  if (i18n.locale === lang && document.title && document.title.indexOf('menu') !== -1) {
    const titles = document.title.split('-')
    document.title = titles.length > 1 ? i18n.t(titles[0].trim()) + ' - ' + i18n.t(titles[1].trim()) : i18n.t(titles[0].trim())
  }
}

/*
 在vuei18n框架中有两个方法，可以把后台接口拉取到的数据合并到框架内部的语言环境中
1.  setLocaleMessage( locale, message )
    参数：
      {Locale} locale
      {LocaleMessageObject} message
  设置语言环境的 locale 信息

2.  mergeLocaleMessage( locale, message )
    参数：
      {Locale} locale
      {LocaleMessageObject} message
  将语言环境信息 locale 合并到已注册的语言环境信息中。

两种使用方法:
      setLocaleMessage会重设框架的语言环境，如果在调用这个方法之前语言环境里面有文件那么会覆盖这个文件，
      mergeLocaleMessage不会覆盖掉他只会合并两个文件，
      所以当你既要做网站的多语言，又需要element框架的国际化时，就需要用mergeLocaleMessage。
 */

i18n.loadModules = () => {
  import('@/lang/zh.js').then((messages) => {
    const newMessages = Object.assign(i18n.getLocaleMessage('zh'), messages.default)
    i18n.setLocaleMessage('zh', newMessages)
    i18n.setTitle('zh')
  })
  import('@/lang/en.js').then((messages) => {
    const newMessages = Object.assign(i18n.getLocaleMessage('en'), messages.default)
    i18n.setLocaleMessage('en', newMessages)
    i18n.setTitle('en')
  })
  Vue.locale = () => {}
  Vue.config.lang = lang
  ElementLocale.i18n((key, value) => i18n.t(key, value))
}
export default i18n

4.在App.vue中添加监听，监听以后可以实时切换语言且页面没有整体刷新效果

watch: {
    '$i18n.locale'(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.reload()
      }
    },
  },

5.在页面对应位置添加事件切换语言

    <a href="javascript:;" class="login-len-en" @click="changeLang('en')" :class="{'login-len-active': s_local==='en'}">EN</a>



// 切换语言
    changeLang(type) {
      localStorage.setItem('languageSet', type)
      this.$i18n.locale = type  //用于切换语言监听，实时刷新语言
      this.s_local = type  //用于本地控制选中状态
    }

6.router.js 执行

i18n.loadModules()

配套lang文件夹