vue使用国际化

Posted 2020-10-19 朱小杰

转载请注明作者与出处

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