最近在重构我的开源项目iMap，觉得如果能做成国际化项目就好了，于是在后台服务中引入了i18n后台配置，前台使用的是AlibabaEgg.jsNode框架提供后台服务。由于框架的开源插件已经包含了egg-i18n，所以我本着不想重新造轮子的心态直接入手。首先打开config/config.default.js设置i18n配置项：exports.i18n={//默认中文defaultLocale:'zh-CN',////URL参数，默认'local'为'lang'queryField:'lang',//cookie名称cookieField:'lang',//cookie持续时间cookieMaxAge:'1y',};其中，它们的相互权重为query>cookie>headers配置好config文件后，需要在config文件夹中新建一个本地文件夹，将项目的语言包放在里面。如果只有中文和英文，那么可以这样。├──config.default.js├──config.local.js├──config.prod.js├──config.unittest.js├──locale│├──en-US.js│└──zh-CN.js└──plugin.js也可以使用json文件，详见egg-i18n文档中，为了偷懒，我直接用英文格式作为key，像这样//en-USmodule.exports={//error_handler'NotFound':'NotFound','AuthenticationError':'AuthenticationError','ServerError':'ServerError',...};//zh-CNmodule.exports={//error_handler'NotFound':'ErrorURL','AuthenticationError':'AuthorizationError','ServerError':'ServerError',...};在项目中，比如我们需要返回NotFound，只需要使用ctx.__('NotFound')，框架会根据当前请求语言自动返回对应的preset前端配置语言包后端都集成了i18n。作为老业务的前端，当然配置，先看效果本项目使用vue，所以先以vue为例默认中文locale:'zh-CN',messages:{//语言包路径'zh-CN':require('@/common/lang/zh'),'en-US':require('@/common/lang/en')}})newVue({components:{App},//这里不要错过i18n,template:''}).$mount('#app')然后在common文件夹新建lang文件夹和对应的语言包#/src/common.└──lang├──en.js└──zh.js语言包内容示例//en-USexportconstm={login:{input_email:'请输入电子邮件地址',input_password:'请输入密码(4-25)',submit:'Signin',github:'Signinwith',reset:'忘记密码？',register:'立即注册'},//zh-CNexportconstm={login:{input_email:'请输入您的邮箱',input_password:'请输入您的密码（4-25位数字）',submit:'登录',github:'GitHub',重置：'忘记密码？',register:'立即注册'},}这样我们就成功引入了语言包，接下来是一个切换语言的例子，使用组件方法中的switchLang方法switchLang(){if(this.localLang==='zh-CN'){this.localLang='en-US'}else{this.localLang='zh-CN'}//切换语言this.$i18n.locale=this.localLang//使用vuex存储全局变量this.setLang(this.localLang)}，在模板中，使用$t('m.yourkey')实现国际化，但是现在还有一个问题，我们怎么添加在脚本中如何在标签中使用i18n呢？使用this.$i18n.messages[this.$i18n.locale].m。您的密钥可用于连接前端和后端。我们分别配置好前后端后，在前端是中文的时候需要相应的后端。返回的数据也是中文格式。在这里，我们使用headers中的'Accept-Language'来匹配前后端之间的语言。axios例子：axios.post(obj.url,obj.data,{headers:{'Accept-Language':window.$lang}})whatisthiswindow.$lang...为了保证纯粹和简洁ajax的配置文件（其实我比较懒）所以不需要引入i18n，我就用这个。$i18n在vuex.local中赋值给window全局变量$lang//mutationsconstmutations={//setlang[types.SET_LANG](state,data){state.local=datawindow.$lang=data}}这样我们就可以方便的获取到当前语言，并传给后台返回对应语言的数据。当然，为了数据的持久化存储，建议前端将当前的语言配置保存在localstorage或者cookies中，否则页面刷新时会重置页面。：https://trevor.top作者博客：https://blog.trevor.top
