vue通过i18n实现国际化

1.安装vue-i18nnpm install vue-i18n

2.在main.js中全局引入

import VueI18n from 'vue-i18n'

Vue.use(VueI18n) // 通过插件的形式挂载const i18n = new VueI18n({

    locale: 'zh-CN',    // 语言标识

    //this.$i18n.locale // 通过切换locale的值来实现语言切换

    messages: {

      'zh-CN': require('./common/lang/zh'),  // 中文语言包

      'en-US': require('./common/lang/en')    // 英文语言包

    }

})new Vue({

  el: '#app',

  i18n,  // 不要忘记

  store,

  router,

  template: '',

  components: { App }

})

3.新建相应的语言包

地址参考:./common/lang/zh

4.在语言包中写入相应的字段

英文:

export const m = {

  music: 'Music'//网易云音乐

}

中文:

export const m = {

  music: '网易云音乐'

}

5.在页面中引用

{{$t('m.music')}}

6.如果想更改语言,直接更改this.$i18n.locale // 通过切换locale的值来实现语言切换

注:如果想刷新之后,切换的语言仍然有效,可以先把语言存到Local storage里面

7.中英问切换的时候,如果网站的表头不及时切换,可以使用插件的方式替代document.title =

你可能感兴趣的:(vue通过i18n实现国际化)