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

Posted 2021-03-22 fengyuexuan

 

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国际化的基础用法~