为什么要国际化？
前端国际化：应用要服务于不同的地区的用户，所以应用不能单一语言；应用要能让不同地区的人无障碍使用就需要实现国际化。 目前在各大商城项目中，对于国际化语言的需求越来越高了，其中最多的就是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.js
header['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对象，导出使用；在写语言包时，需要注意语言包中的字段名需要保持一致，在请求头中通过切换语言来改变请求头的语言，调用接口后，后端就可以返回不同的语言数据了。在完成项目时，一定一定要细心，不然一个字母写错了，就会出现在每个文件中反复找。使用多语言时，会发现每种语言的语序会有一些差别，也是项目中需要注意的地方。写完后应该多注意页面的样式有没有出现问题，比如开始是中文，切换成英文时，由于英文较长会导致页面样式发生变化，还需要优化。
源码附件已经打包好上传到百度云了，大家自行下载即可～
链接: pan.baidu.com/s/14G-bpVth… 提取码: yu27
百度云链接不稳定，随时可能会失效，大家抓紧保存哈。
如果百度云链接失效了的话，请留言告诉我，我看到后会及时更新～
GIT 项目推荐：包含多端免授权可商用
