| 前端的国际化是一个比较常见的需求。但网上关于这一方面的直接可用的方案却不多。最近刚做了一版基于Vue.js的多语言实现，在此简单作一小结。
一、通常有哪些内容需要处理
总的来说，一个Web应用中，需要做多语言切换的内容常见的包括如下方面： 1、模板中的内容，如Vue.js的<template>标签中的文字内容 2、JS代码中的文字内容 3、图片中的文案内容 4、页面title 5、第三方组件中的文案（比如，我的项目中用到了Vux的组件） 6、后端接口中需要展示到前端的数据内容 7、后端接口返回的错误提示
二、基本思路
1、首先，需要确定以什么样的方式来获取到当前应该展示何种语言 我采用的是用URL传递?lang=en或者?lang=zh-CN这样的传递参数的形式。这样做的好处在于可以通过链接指定用哪种语言。但是，只依赖于地址栏参数也是不方便的。比如，在页面跳转的时候，这个地址栏参数可能就丢失了。这会导致你在页面跳转之后就不知道该用哪种语言展示了。而理想的的方式应该是，进入某个页面的时候带有这个参数（这个时候就获取到该使用何种语言了），等再跳转到其它页面的时候就不必再带这个lang参数了，因为此时你已经知道该用哪种语言了。所以，应该在一进入第一个页面的时候就把这个参数存下来，比如，存在localstorage中，存在vuex的state中。 这里，就引出来一个语言判断的优先级问题。 因为地址栏里可能有lang参数，localstorage中可能也有相关的存储字段（因为上次访问过本应用），你可能还想设置默认的降级语言，等等。其优先级应该如何处理呢？ 正确的优先级应该是： 先看地址栏参数中有没有； 再看localstorage中有没有； 然后再通过navigator.language获取浏览器默认语言，看是否是你的应用所支持的语言，若是，则采用之； 最后才是使用回退语言（例如，比较通用的英语）。 当然，你可以根据你的需求来做一些简化。 2、其次，采用什么工具来解决语言转换和打包的问题？ （1）i18n相关工具的选择
关于React状态管理的三个规则总结
H5微信公众号授权的简单实现步骤 |
