title: vue国际化
date: 2016-11-17
- 国际化
本文介绍vue国际化的思路与实现。
vue国际化
环境
Node6.9.1 + webpack1.13.2 +vue2.0 +vue-i18n4.7.1
思路
思路.png
实现
实现范围
1、 不支持图标、对齐方式的国际化；
2、 实现静态html文本、悬浮框提示信息、按钮文本、按钮提示、输入框placeholder的国际化
具体实现
1、 维护语言json文件zh_CN.json、en.json
en.json文件：
{
"tag1": "tag1",
"tag2": {
"tag2_tag1": "tag2.tag1"
"tag2_tag2": {
"tag2_tag2_tag1": "tag2.tag2.tag1"
....
}
}
}
zh_CN.json文件：
{
"tag1": "标签1",
"tag2": {
"tag2_tag1": "标签2.标签1"
"tag2_tag2": {
"tag2_tag2_tag1": "标签2.标签2.标签1"
....
}
}
}
支持多层嵌套
2、 在项目中引入vue-i18n
npm install vue-i18n
3、 全局注册vue-i18n
main.js
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
在Vue.use(VueI18n)后理想的位置加载语言文件（console warnings）
loadLanguages(Vue,['zh_CN','en'],lang)
function loadLanguages(Vue,languages,defaultLanguage){
for (let i = 0; i < languages.length; i++) {
Vue.locale(languages[i], function () {
return fetch(`../static/language/${languages[i]}.json`, {
method: 'get',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
}).then(function (res) {
return res.json()
}).then(function (json) {
if (Object.keys(json).length === 0) {
return Promise.reject(new Error('locale empty !!'))
} else {
return Promise.resolve(json)
}
}).catch(function (error) {
return Promise.reject()
})
},function(){
if(i === languages.length -1){
Vue.config.lang = defaultLanguage
}
})
}
}
动态加载语言文件，此处只是简单的示例，不包括错误处理等。动态加载语言包的方法，i18n的作者正在完善，待完善后，此方法将废弃。
4、 语言的动态切换
html
<select v-model="lang">
<option v-for="item in langs" :value="item"> {{item}}</option>
</select>
<script>
data: function () {
return {
lang: 'zh_CN',
langs: [
'zh_CN',
'en'
]
}
},
watch: {
lang (val) {
Vue.config.lang = val
}
}
</script>
4、 组件使用
4.1 静态html
// 静态html文本
<p>{{ $t("tag1") }}</p>
// 输入框placeholder
<textarea :placeholder="$t('tag2')"></textarea>
// 按钮文本
<span class="button-text">{{$t("button.addButton")}}</span>
// 多层嵌套
<p>{{ $t("tag2.tag2_tag2.tag2_tag2_tag1") }}</p>
4.2 提示性的文字(message悬浮框)
通过
this.$t()
调用，动态获取提示信息
5、 配置信息、功能菜单国际化
配置信息、功能菜单在数据库中保存多语言版本，通过用户语言动态加载。不同版本的语言数据库单独部署。
6、 控件的国际化（暂不考虑）
控件的国际化指：通过语言切换不能完成国际化的控件，如控件使用习惯不一致，常见的为日期控件，不同的地区日历可能不一致
通过v-if判断语言然后选择需要显示的控件。
7、 图标、对齐方式的国际化（暂不考虑）
图标可通过数据库多语言配置实现国际化（图标样式从数据库读取），对齐方式通过样式实现国际化（如：beyond的RTL）
