vue整合vue-i18n实现国际化!

1.安装vue-i18n npm 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/en

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

英文:
export const m = { 
  music: 'Music'//网易云音乐
}
中文:
export const m = {
  music: '网易云音乐'
}

5.在页面中引用

<span>{{$t('m.music')}}</span>

6.如果想更改语言,直接更改this.$i18n.locale // 通过切换locale的值来实现语言切换
注:如果想刷新之后,切换的语言仍然有效,可以先把语言存到Local storage里面

你可能感兴趣的:(国际化,vue.js)