使用vue-i18n动态加载国际语言

2020中旬入职新公司，主要负责海外电商项目，因此项目需要用到国际语言切换功能。鉴于网上大部分资料都是基于i18n实现静态语言包的切换，于是就出现了这篇文章。

一、原理
涉及到多语言的切换，如中文、英语、韩语等。主要思路是服务端会返回整个项目的所有语言文本，使用i18n的模板渲染，前端再通过ajax获取数据再插入到i18n里实现翻译切换即可。

二、代码
这里基于element+vue-i18n实现，也做了一个基于vant的移动端项目，实现方式都差不多。

//main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

//多语言插件
import i18n from '@/i18n/i18n';

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

//i18n.js
import Vue from 'vue'
import locale from 'element-ui/lib/locale';
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
//从localStorage获取语言选择
const i18n = new VueI18n({
    locale: localStorage.lang || navigator.language.toLowerCase(), //初始未选择浏览器默认语言 转换为小写 分别有zh zh-cn en en-us
})

export default i18n

//langSelect.vue
getLanguageCn().then(res=>{
  //动态插入内容到i18n
  this.$i18n.setLocaleMessage(e, res.data);
  //本地语言开关切换
  this.$i18n.locale = e;
  //设置本地存储
  localStorage.setItem("lang", e);
})

//home.vue
<p>{{$t('message.text')}}</p>

//接口返回数据格式
{
  'message': {
    'text': '好好学习，天天向上',
  }
}

三、效果