element实现多语言国际化

一、安装国际化插件

npm install vue-i18n --save

二、创建语言包

//  zh.js

export default {
  home:{
    title:'标题'
  }
}

// en.js

export default {
  home:{
    title:'title'
  }
}

三、实现多语言

//  main.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import en_element from 'element-ui/lib/locale/lang/en'
import zh_element from 'element-ui/lib/locale/lang/zh-CN'
import zh from 'assets/js/lang/zh.js'
import en from 'assets/js/lang/en.js'
import locale from 'element-ui/lib/locale'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.use(VueI18n) 

const messages = {
  'en': {
    ...en,
    ...en_element
  },
  'zh': {
    ...zh,
    ...zh_element
  }
}

const i18n = new VueI18n({  
  locale: localStorage.getItem('lang') || 'en',  
  messages: messages  
})  

locale.i18n((key, value) => i18n.t(key, value))

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


//  页面内

<span class="demonstration">{{$t('home.title')}}</span>

//  切换语言

this.$i18n.locale = 'zh'
localStorage.setItem('lang','zh')