通过vue-i18n实现的语言的转换
首先自然要先安装vue-i18n
npm install vue-i18n
安装完成后再main.js中使用vue-i18n
import VueI18n from 'vue-i18n'
import en from '../static/lang/en'
import zhCHS from '../static/lang/zhCN'
import zhCHT from '../static/lang/zhTW'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'zhCN'
messages:{
'en': en,
'zhCN': zhCN,
'zhTW': zhTW,
}
})
new Vue({
el: '#app',
router,
i18n,
components: { App },
template: '<App/>'
})
其中en,zhCN等是我们自己使用的语言包,结构如下:
zhCN.js
module.exports={
Message:{
home:'首页',
news:'动态'
}
}
在template标签中使用
{{$t("Message.home")}}
这会从当前的语言包中渲染出相应的文字,如默认的语言包是zhCN,则这段代码会显示为 首页
如果文字是在标签的属性内,我们可以用v-bind替换其中的文字
:value="$t('Message.home')"
在js部分使用
一般情况下,引用方法如下:
this.$t('Message.home')
但是在Ajax中这样使用就会出问题,在网上找了一些资料,似乎Ajax中的this都会指向Ajax本身,所以我们要另外定义一个变量指向vue,只需在Ajax前定义
var that = this
之后再Ajax中用that替换
that.$t('Message.home')