在web开发中,国际化大部分情况是不用考虑的,因为大部分人开发的软件程序都只是给一小部分相同语言人用的。
在以往的的web开发中国际化的任务也是交给后端来处理,即生成html页面的时候已经是经过语言转换的了。在现在前段如此盛行的时刻,前段国际化也逐渐流行开来。本文主要介绍vuejs国际化插件vue-i18njs的使用以及遇到的坑。
vuejs官方的国际化插件推荐中,vue-i18n是相对来说入侵代码最小的,也是最容易上手的。
那么,从哪里引入vue-i18n呢?最简单的办法就是从jscdn网站上引用,当然你也可以采用官方readme中的引入办法。
<script src="https://cdn.bootcss.com/vue-i18n/7.0.0/vue-i18n.js"></script>
<script src="https://cdn.bootcss.com/vue/2.3.3/vue.js"></script>
要保证引用顺序没有问题。
代码如下:
//获取用户浏览器优先选择语言
function get_language() {
if (navigator.language) {
var language = navigator.language;
}
else {
var language = navigator.browserLanguage;
}
return language;
}
//告诉vue引入国际化插件
Vue.use(VueI18n);
// 建立翻译基础
const messages = {
en: {
lang: {
browse: 'BROWSE'
}
},
cn: {
lang: {
browse: '浏览'
}
}
};
//判断用户使用的语言
if (get_language()=="zh-CN"){
loc = "cn"
}else {
loc = "en"
}
//生成国际化插件实例
const i18n = new VueI18n({
locale: loc, // set locale
messages, // set locale messages
});
生成国际化插件实例已经完成了。
那么,如何在vuejs实例中引入国际化呢? 非常简单,代码如下:
var app = new Vue({
i18n,
el: "#root",
data: {
...
在生成vue实例时,将刚刚生成的国际化实例i18n置入即可。
应用国际化那就更简单了,就像使用vue的data属性一样。
<span v-text="$t('lang.browse')"></span>
<p>{{ $t('lang.browse') }}</p>
注意,国际化实例中messages对象的en和cn属性的结构和html中结构的对应关系。其次,注意需要使用$t('')将属性包裹起来。推荐使用第一种方式,即v-text。
Vue.use(VueI18n);
引入i18n。'<span v-text="$t(\'lang.browse\')"></span>'