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

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

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

vue-i18n引入

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
});

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

在vue实例中引入国际化

那么，如何在vuejs实例中引入国际化呢？
非常简单，代码如下：

var app = new Vue({
        i18n,
        el: "#root",
        data: {
...

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

在html中应用国际化

应用国际化那就更简单了，就像使用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>'