不废话,直接开始!
第一步:
cnpm install vue-i18n
第二步:min.js中
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'en',
messages: {
'zh': require('@/assets/internationalization/zh.json'), //在静态资源文件中创建国际化语言包
'en': require('@/assets/internationalization/en.json') //路径随意
}
})
new Vue({
el: '#app',
router,
i18n, //i18n 实例
components: { App },
template: '<App/>'
})
第三步:定义语言包(按需定义)
//zh.json中 定义如下翻译
{
"home":{
"describe":"这是一个i18n测试页",
"cut":"切换"
}
}
//en.json中 定义如下翻译
{
"home": {
"describe":"This is i18n Test",
"cut":"cut"
}
}
第四步调用国际化翻译:
<template>
<div>
{{$t("home.describe")}}
<div><span @click="cutlanguage">{{$t("home.cut")}}</span>/{{this.$i18n.locale}}</div>
</div>
</template>
<script>
export default{
data(){
return{
}
},
methods:{
cutlanguage(){
console.log(this.$i18n.locale)//打印查看当前语言包
if(this.$i18n.locale=="en"){
this.$i18n.locale="zh"
}else{
this.$i18n.locale="en"
}
},
}
}
</script>
<style>
</style>
附带效果图: