vuejs国际化插件vue-i18n的使用

在web开发中,国际化大部分情况是不用考虑的,因为大部分人开发的软件程序都只是给一小部分相同语言人用的。

在以往的的web开发中国际化的任务也是交给后端来处理,即生成html页面的时候已经是经过语言转换的了。在现在前段如此盛行的时刻,前段国际化也逐渐流行开来。本文主要介绍vuejs国际化插件vue-i18njs的使用以及遇到的坑。

vue-i18n引入

vuejs官方的国际化插件推荐中,vue-i18n是相对来说入侵代码最小的,也是最容易上手的。

那么,从哪里引入vue-i18n呢?最简单的办法就是从jscdn网站上引用,当然你也可以采用官方readme中的引入办法。

1
2
<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>

要保证引用顺序没有问题。

国际化样式建立

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//获取用户浏览器优先选择语言
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
});

生成国际化插件实例已经完成了。

在vue实例中引入国际化

那么,如何在vuejs实例中引入国际化呢?
非常简单,代码如下:

1
2
3
4
5
var app = new Vue({
i18n,
el: "#root",
data: {
...

在生成vue实例时,将刚刚生成的国际化实例i18n置入即可。

在html中应用国际化

应用国际化那就更简单了,就像使用vue的data属性一样。

1
2
<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>'