在vue中使用vue-i18n

 

一、安装插件

npm install vue-i18n --save

二、为了后续方便管理，在src下新建一个plugins文件夹专门管理插件

三、在plugins下新建i18n.js文件

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

const i18n = new VueI18n({

      // 使用localStorage存储语言状态是为了保证页面刷新之后还是保持原来选择的语言状态

    locale: localStorage.getItem('lang') ? localStorage.getItem('lang') : 'zh', // 定义默认语言为中文 
    messages: {
        'zh': require('@/assets/languages/zh.json'),
        'en': require('@/assets/languages/en.json')
    }
})

export default i18n

四、在main.js中引入插件

import i18n from '@/plugins/i18n' // 导入vue-i18n

new Vue({

  router,

  i18n, // 此处需要挂载上i18n，不要忘记

  render: h => h(App)

}).$mount('#app')

 

五、在assets目录下新建languages文件夹存放对应的语言json文件

// zh.json
{
  "message": {
    "greeting": "你好"
  }
}

// en.json
{
  "message": {
    "greeting": "hello"
  }
}

 

六、使用

// 在template中的使用方式: 
<span>{{$t('message.greeting')}}</span>

// 在script脚本中的使用方式:
this.$t('message.greeting')

 

七、语言切换

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

this.$i18n.locale = ‘en’；
localStorage.setItem(‘lang’, ‘en’)