转载请注明作者与出处

一：安装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"}