i18n vue 多语言配置，切换刷新

实现项目多语言切换

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)

const lang = (localStorage.getItem('languageSet') || 'zh').toLowerCase()
export const i18n = new VueI18n({
  locale: lang, // 当前语言环境 this.$i18n.locale = 'en'
  fallbackLocale: 'zh', // 默认语言环境。如果locale中无匹配项则采用该项值
  messages, // set locale messages
  silentTranslationWarn: true
})
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())
  }
}

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.在页面对应位置添加事件切换语言

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