Vue国际化配置

Vue国际化配置

1、引入vue-i81n

npm install vue-i18n --save

 

2、创建不同语言的json格式文件

• 在src文件夹下新建目录和文件，格式如下
  • src
    • common
      • lang
        • en.js
        • zh.js
• en.js

module.exports = {
  msg: {
    msg_welcome:'Welcome!',
    msg_wait:'Please Wait!'
  },
  error: {
    error_upload: 'Error Upload !',
    error_operate: 'Error Operate !',
  }
}

 

• zh.js

module.exports = {
  msg: {
    msg_welcome:'欢迎！',
    msg_wait:'请等待！'
  },
  error: {
    error_upload: '上传错误！',
    error_operate: '操作错误！',
  }
}

 

3、main.js配置

import VueI18n from 'vue-i18n'
Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: 'zh',// 语言标识
  messages: {
    'zh': require('./common/lang/zh'),
    'en': require('./common/lang/en')
  }
});



new Vue({
  el: '#app',
  router,
  i18n,//国际化
  components: {App},
  template: '<App/>'
})

 

4、vue文件中引用

• 属性中引用【注：属性前加:】

:title="$t('msg.msg_welcome')

 

• 直接引用

{{$t("msg.msg_welcome")}}

 

• js中引用【注：在请求的处理函数中记得将this先赋值给变量，之后用新的变量来进行调用】

this.$t("msg.msg_welcome")