转载请注明作者与出处
一：安装vue-i18n
npm install vue-i18n --save二：定义不同语言的json语言包
一般把它放到npm工程中的src目录下，因为这个目录是要进行编译的，而我们是需要把这些语言包全部编译进去
我们在src建立一个local文件夹，然后建立两个文件
- language-en.js 英文
- language-cn.js 中文
我们不一定非要按照国际语言规范来命令，比如我们直接命名为abc.js也可以，只需要在对应的关系中读取这个js文件即可
export const message = {
global : {
view : "view",
configList : "config list"
},
index : {
xx : "xx"
}
}export const message = {
global : {
view : "视图",
configList : "配置列表"
},
index : {
xx : "xx"
}
}需要注意的是，对应的json结构需要保持一至，因为是要按照key来读取相应的value
三：配置json语言包
在main.js在配置
import VueI18n from 'vue-i18n'
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: 'zh-cn',//这个配置的是默认的语言包
messages: {
'zh-cn': require('./local/language-zh.js'), // 中文语言包
'en': require('./local/language-en.js') // 英文语言包
},
});
new Vue({
el: '#app',
i18n : i18n,
});四：使用语言包
既然我们配置了语言包，那我们使用的过程中，肯定就不能自己写文本内容了，而是要使用相应的key来定义
在html中使用
<div slot="header" class="clearfix">
<span>{{$t("message.global.view")}}</span>
</div>在vue表达式中使用
<pie-data :text="$t('message.index.configNumber')">202</pie-data>在js中使用
注意：这个
this是指vue对象
{required : true , message : this.$t('message.config.addForm.tips.versionNotNull'),trigger : "blur"}