vue2+i18n国际化+中英切换+动态加载

前言

公司项目要搞个国际化，查了资料i18n可以解决，这个时候我还以为只需要简单配置就可以实现，当我真正开始才发现，原来还需要自己配置中英文翻译json，不过也还好自己多写几个，因为是前后端都需要翻译，所以改成从后端接口获取json文件，这也是问题的开始......，这次就记录下踩过的坑，因为配置比较简单，看官网就可以实现。

踩过的坑

本文主要解决：1.初始化怎么获取json并渲染；2.切换语言没生效

// 在permission每个涉及到next()执行都是用此函数，除了next({ path: '/' })重定向的
loadLanguage().then((res) => {
    next({ ...to, replace: true })
  }).catch(() => {
    console.log('失败')
  })

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

// 引入各个语言配置文件
import zh from './lan/zh'
import en from './lan/en'

import store from '@/store/modules/user'
import axios from 'axios'
// 创建vue-i18n实例i18n
const i18n = new VueI18n({
  lazy: true,
  // 设置默认语言
  locale: localStorage.getItem('language') || store.state.dialect, // 语言标识
  // 添加多语言（每一个语言标示对应一个语言文件）
  messages: {
    zh,
    en
  }
})

export function loadLanguage() {
  const local = localStorage.getItem('language') || 'ZH'
  // 页面加载前获取翻译
  return new Promise((resolve, reject) => {
    axios.get(`你的接口`).then((res) => {
      const data = res.data
      const lowerLocal = local.toLowerCase()
      i18n.setLocaleMessage(lowerLocal, Object.assign(data.data))
      // 这里也是个重点，开始没写这个配置，我怎么切换都不行，后来发现原来i18n.locale还得单独赋值啊，哪位大佬知道原因分享分享
      i18n.locale = lowerLocal
      resolve(res.data.data)
    })
  })
}

// 暴露i18n
export default i18n

// 这部分是i18n下边中英文的配置文件
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

let lang = {}
// 这块因为我取值的时候有是string的情况，各位没有直接不需要if判断
if (typeof localStorage.getItem('langObj') !== 'string') {
  const obj = JSON.parse(JSON.stringify(localStorage.getItem('langObj')))
  const obj1 = JSON.parse(obj)
  lang = {
    ...zhLocale,
    ...obj1
  }
}

export default lang

// 和上边zh.js同理
import enLocale from 'element-ui/lib/locale/lang/en'

let lang = {}
if (typeof localStorage.getItem('langObj') !== 'string') {
  const obj = JSON.parse(JSON.stringify(localStorage.getItem('langObj')))
  const obj1 = JSON.parse(obj)
  lang = {
    ...enLocale,
    ...obj1
  }
}