i18n 资源国际化 vue项目中切换多语言

在vue项目中需要用到多语言，然后百度了一些前辈的文章，都是推荐用i18n。所以我也在这里写一写我自己的总结。

安装

npm install vue-i18n

---

使用

/* 在main.js 里面引用 */

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

---

初始化  

同样是在main.js里面加入

const  i18n  = new VueI18n({

    locale: 'zh',         //设置默认语言

    messages: {

        'zh': require('@/common/lang/zh.js'),

        'en': require('@/common/lang/en.js')

    }

})

---

创建JS文件

我个人是在我项目的根目录下的common/lang下创建了两个js文件，中文 zh  英文 en

zh.js 的代码如下

module.exports = {

    message: {

         demo: '这是一个例子'

    }

}

---

en.js 的代码如下

module.exports = {   

     message: {

              demo: 'demo'

    }

}

---

完成这些步骤就可以在页面里面引用了

<div>

    {{ $t('message.demo')}}

</div>

---

也可以在属性里面引用

<div>

    <input  :placeholder=" $t(' message.demo')"  />

</div>

---

切换语言

html部分

    <button @click="changeLang" id="zh">中文</button>

     <button @click="changeLang" id="en">英文</button>

JS部分

    methods: {

          changeLang （e）｛

               this.$i18n.locale = e.target.id

        ｝

     }

---

这样就实现了多语言的切换啦

---

附带上我项目里多语言的截图

点击English就可以切换到英语 切换成功~~

好了，以上就是我对i18n做的一个小总结，也是我自己发表的第一篇文章。如果表达不对或者有错误，欢迎大家给我留言指出。