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': '好好学习，天天向上',
}
}
三、效果
