序
项目结束，很多人想把项目国际化，让我们的项目走出国门，让更多的人知道和使用我们的项目。这就需要一套适合其他人阅读的语言体系，至少是英语吧？毕竟，英语是国际语言。当然，如果你有精力，也可以开发多种语言供用户选择。这里我们选择在项目中加入中文和英文，我们使用的插件是vue-i18n。
vue-i18n是什么？
I18n是英文国际化的缩写，意思是国际化。vue-i18n是为vue开发的国际化插件，它允许项目支持多语言切换，以满足不同地区用户的需求。
安装vue-i18n
直接在项目中执行安装命令:npm install vue-i18n - save，当前版本8.12.0。
全球vue-i18n简介
将vue-i18n引入项目，实例化vue-i18n，通过require导入需要加载的语言包。我这里根据个人需求只需要中文和英文，所以介绍zh-CN.js和en-US.js，分别对应中文和英文。您还可以提供多种语言包。最后，不要忘记将实例挂载到Vue。
从“vue”导入vue从“vue-i18n”vue.use//Instantiate i18n导入vue i18n并引入语言文件。constit 18n = new vue i18 n，' en-us': require}}) newvue})。$ mount定义了语言包
语言包已经用json格式编写了，数据是以键-值对的形式呈现的，所以每个语言包的键是对应的，但值是不同的。为了避免编码问题，我们的键都是英文的，所以在创建语言包的时候要从英文开始，做好之后直接复制修改相应的值就行了，最后记得导出对象。可以根据个人需要定义数据的形式。我喜欢把相同的放在一起，这样更容易找到。如果你觉得每次通过lang获取数据比较麻烦，我们可以优化一下，把export const lang=改写成module.exports= mode，这样就可以直接获取objects中的对象了。
页面渲染
在静态渲染中，用双花括号将数据包装成变量，用$t调用语言包中键对应的值。如果使用element-ui的动态绑定值，双引号就够了。动态渲染时，我们可以使用计算属性，然后用这个计算属性遍历DOM元素。
//静态呈现{{$t}}//动态呈现计算:{Navlist {return this。$ t}}，{{item}}手动切换语言
在页面中编写一个DOM元素，并添加一个click事件来判断这个的当前值。$i18n.locale。$ i18n .区域设置为“zh-CN”，将其切换到“en-US”。如果您使用多种语言，请直接将您当前选择的语言标识符分配给此。i18n美元。更改{ if { this。$ i18n . locale = ' en-US '；//key语句}else {this。$ i18n . locale = ' zh-CN '；//关键语句}}自动切换语言
根据我们前两篇文章的基础，可以通过两种方式实现自动语言切换功能。第一种方式是根据客户端浏览器设置的语言自动切换语言。如何获取浏览器语言可以参考:Vue实战042:获取客户端浏览器和操作系统信息。第二种方式是根据外网IP地址切换语言。由于IP只能位于城市，我们需要一个国内省份的列表。通过判断ip是否在此列表的范围内来设置语言。如果拿到了用户IP，可以参考:Vue实战041:获取当前客户端IP地址了解详情。这里，我们以浏览器语言为例来演示。
修改配置信息，并将语言配置信息存储在localStorage中。默认区域设置是从获取localStorage中获得的。切换语言时，localStorage中的信息也同时被修改，这样下次进来时系统会按照用户上次设置的语言显示。
//实例化i18n，引入语言文件。Const i18n = new VueI18n，//默认语言消息:{'zh-cn': require，' en-us ':require })//手动切换语言更改{if {this。$ i18n . locale = ' en-us '；localStorage.setItem }else { this。$ i18n . locale = ' zh-CN '；LocalStorage.setItem }}，通过浏览器语言自动切换。
接下来要做的主要事情是让系统在加载路由时自动检测localStorage中是否存在lang。如果存在，说明用户访问过我们的系统。如果它不存在，我们将为它添加语言设置。由于我们也不知道用户会从哪里进入系统，所以最好在每次加载路线时进行处理。这里我们可以使用Vuerouter的beforeEach函数。详情请参考:VUE实战040:nprogress页面加载进度条。以下是beforeEach的介绍。
router . before each = > { nprogress . start if){ let lang = navigator . language if { local storage . setitem } else { local storage . setitem } } next })这里你应该会发现一个问题，就是第一次访问时没有实现自动切换语言的功能。但是在localStorage中，我们可以看到lang已经被赋值了，只有在页面再次刷新时才生效。解决这个问题的方法是将i18n.locale属性配置放入Vue，这样系统加载时i18n.locale属性会自动刷新。
new vue { i18n . locale = local storage . getitem }，render: h = > h})。$ mount由IP地址自动切换
这里实现了根据浏览器系统语言自动切换语言的功能。接下来，根据IP自动切换语言的原理很简单。IP只能位于省市。在这里，我们可以只提取省份，然后定义一个列表来附加国内省份的名称，然后进行匹配。如果存在，说明在国内使用，所以我们就设置为zh-CN，如果不存在，就设置为en-US。
router . before each = > { nprogress . start if){ var city = local storage . getitem Let MIT = city . split[0]| | city . split[0]| | city . split[0]Let MIT list =['北京'，'上海'，'天津'，'重庆'，'澳门'，'香港'，'广东'，'云南'，'河北'，'山东']if >-1){ local storage . setitem } else { local storage . setitem }
