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就可以切换到英语
切换成功~~
