应用九：Vue之国际化（vue-i18n）

vue-i18n是一款针对Vue.js 的国际化插件，具体应用步骤如下：

一、安装插件

npm install vue-i18n --save

二、在main.js中引入插件

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

三、创建i18n实例

const i18n = new VueI18n({ 

 // 默认语言

 locale: 'zh',

 // 引入对应的语言包文件

 messages: {   

    'zh': require('@/assets/languages/zh.json'),   

    'en': require('@/assets/languages/en.json') 

  }

});

　　注：为了在页面刷新后仍然能够保持当前的语言环境，一般会将语言参数缓存到localStorage中，locale属性的初始赋值方式会变为 locale: localStorage.getItem(‘lang’) || ‘zh’

四、在assets目录下新建对应的语言json文件

// zh.json

{

  "message": {

    "greeting": "你好"

  }

}

// en.json

{

  "message": {

    "greeting": "hello"

  }

}

　　注：json文件中的key值必须使用双引号。

五、使用

// 在template中的使用方式:

<span>{{$t('message.greeting')}}</span>

// 在script脚本中的使用方式:

this.$t('message.greeting')

六、语言切换

　　语言切换只要改变i18n实例中locale的值即可:

this.$i18n.locale = ‘en’；

localStorage.setItem(‘lang’, ‘en’)

　　上述呢就是vue国际化的基础用法~

巴特西

应用九：Vue之国际化（vue-i18n）

最新文章

热门文章