为什么要国际化？
前端国际化：利用要服务于不同的地区的用户，所以利用不能繁多语言；利用要能让不同地区的人无障碍应用就须要实现国际化。
目前在各大商城我的项目中，对于国际化语言的需要越来越高了，其中最多的就是vue我的项目应用i18n插件实现多语言切换性能，最近有幸我刚好做了这方面的业务，上面是我对vue-i18n国际化语言的一点总结与记录

注释
我的项目中通常通过抉择语言，或者标签的切换来展现不同的语言，管制语言的配置信息在locale中。

1.引入多语言
首先在main.js中进行引入并注册vue-i18n，引入中文语言包和英文语言包（依据开发需要引入语言包）

//main.js//多语言引入import VueI18n from 'vue-i18n'import en from './locale/en.json' //英文import zhHans from './locale/zh-Hans.json' //中文Vue.use(VueI18n)let i18nConfig = {  locale: uni.getLocale(),// 获取已设置的语言  messages: {    en,    'zh-Hans': zhHans,  }}const app = new Vue({    ...App,    i18n,})app.$mount();

2.语言包文件
创立json文件，放入你须要的语言，我的项目中咱们应用了中文和英文，能够依据开发的需要创立须要的语言文件，留神每个语言包中的字段名要保持一致。

zh-Hans.json，en.json的构造如下

//zh-Hans.json{    "home": "首页"}//en.json{    "home": "home"}

3.设置默认语言
这里设置的是默认语言为中文，能够依据开发语言自行设置

header['cb-lang'] = uni.getStorageSync('locale') ? uni.getStorageSync('locale') :'zh_cn'

4.在页面中应用
应用$t('字段名')在html中获取，应用this.$t('字段名')在js中获取

<template>      <view>          <text>{{$t('home')}}</text>        <view v-text="$t(`home`)"></view>    </view>  </template>  <script>    export default {        data() {            return {                home: this.$t(`home`)            }        }    }</script>

5.在页面中切换语言
通过事件触发，点击切换语言，管制locale的值，调用对应的语言包，这里是通过点击图标切换语言（我的项目中只用到两种语言），应用多种语言时也能够通过抉择语言来管制切换，判断目前应用的语言，点击图标后将另一个语言赋给locale，而后将该语言存储在本地缓存中

<view class="message">    <view hover-class="none" @click="locale()">        <view v-if="$i18n.locale == 'zh-Hans'" class="iconfont icon-jinbi_o"></view>        <view v-if="$i18n.locale == 'en'" class="iconfont icon-yue"></view>    </view></view>methods: {    locale(){        if(this.$i18n.locale=='zh-Hans'){            this.$i18n.locale = 'en';            uni.setStorageSync('locale', 'en_us')        }else if(this.$i18n.locale=='en'){            this.$i18n.locale = 'zh-Hans';                                                                               uni.setStorageSync('locale', 'zh_cn')        }    },}

遇到的问题
1.切换语言申请头语言不扭转
调试的时候，不刷新页面，config.js只能触发一次，然而request.js外面这个申请办法每次都会触发，所以在request.js里把批改的cb_lang加上就会及时触发，这样调用接口后，后端就能够返回不同的语言数据了

//request.jsheader['cb_lang'] = uni.getStorageSync('locale') ? uni.getStorageSync('locale') :'zh_cn'

2.在until.js等一些公共办法的文件中无奈应用this.$t
在公共的js文件中，无奈应用this来援用曾经注册的组件，咱们须要申明一个i18n对象，导出应用

import en from './en.json'import zhHans from './zh-Hans.json'import Vue from 'vue'; import VueI18n from 'vue-i18n'Vue.use(VueI18n)const i18n = new VueI18n({    locale: uni.getStorageSync('locale') ? uni.getStorageSync('locale') :'zh_cn',//默认为中文    messages: {        'en_us':en,        'zh_cn': zhHans,    }})export default i18n 在公共文件中，就能够间接应用i18n.t('')来获取语言了    if (!noAuth) {        //登录过期主动登录        if (!store.state.app.token && !checkLogin()) {            toLogin();            return Promise.reject({                msg: i18n.t(`not_logged_in`)            });        }    }

总结
在一些多语言我的项目中，固定的文字就须要定义在语言包中，通过locale管制语言的类型扭转语言包，就能够实现国际化预言了。须要留神在一些公共js文件中，无奈应用this,咱们就须要申明一个i18n对象，导出应用；在写语言包时，须要留神语言包中的字段名须要保持一致，在申请头中通过切换语言来扭转申请头的语言，调用接口后，后端就能够返回不同的语言数据了。在实现我的项目时，肯定肯定要仔细，不然一个字母写错了，就会呈现在每个文件中重复找。应用多语言时，会发现每种语言的语序会有一些差异，也是我的项目中须要留神的中央。写完后应该多留神页面的款式有没有呈现问题，比方开始是中文，切换成英文时，因为英文较长会导致页面款式发生变化，还须要优化。

源码附件曾经打包好上传到百度云了，大家自行下载即可～

链接: https://pan.baidu.com/s/14G-b...
提取码: yu27
百度云链接不稳固，随时可能会生效，大家放松保留哈。

如果百度云链接生效了的话，请留言通知我，我看到后会及时更新～

GIT 我的项目举荐：蕴含多端免受权可商用

附件地址：https://gitee.com/ZhongBangKeJi