Vue2.x下使用vue-i18n国际化

1. npm上下载vue-i18n

 npm install vue-i18n

2. 新建文件夹配置i18n

// i18m文件夹下新建index.js
import Vue from 'vue'
import Vuei18n from 'vue-i18n'
Vue.use(Vuei18n )
import zh from './zh.js'
import en from './en.js'

const i18n = new Vuei18n({
  locale : localStorage.getItem('lang') || 'zh', // 语言
  messages: {  // 文案
  zh, // 文案的中文版
  en // 文案的英文版
  }
})
export default i18n

3. 配置中英文文案

// zh.js
export default {
  commen : {
    example1 : '哈哈哈哈哈',
    example2 : '嘻嘻嘻'
  }
}

// en.js
export default {
  commen : {
    example1 : 'sdasdasda',
    example2 : 'dfdsdfdf'
  }
}

4. 挂载在main.js下

import i18n from '@/i18n/index'
new Vue({
  router,
  store,
  i18n,
  render: h => h(App),
}).$mount('#app')

5.在页面里使用

<p>{{$t('commen.example1')}}</p>
<p>{{$t('commen.example2')}}</p>

6.修改语言

this.$i18n.locale = 'zh'