element-ui+vue-i18n实现国际化

官方文档有使用说明

如果只需要element-ui中的单个组件国际化,可以添加Vue.component(组件.name, 组件)

//main.js
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import { DatePicker, Pagination } from 'element-ui'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import VueI18n from 'vue-i18n';
import { messages } from '@components/common/i18n';
import 'element-ui/lib/theme-chalk/index.css'; // 默认主题

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

const messages = {
	'zh': {
		demo:'中文', //这里添加你需要国际化的内容
		...zhLocale
	},
	'en':{
		demo:'English',
		...enLocale,
	}
}
const i18n = new VueI18n({
  locale: 'en',//默认切换英文
  messages
});

//只针对分页和时间选择组件国际化
Vue.component(DatePicker.name, DatePicker) 
Vue.component(Pagination.name, Pagination)

Vue.use(ElementUI, {
  size: 'small',
  // enLocale
  i18n:(key,value)=>i18n.t(key,value)
});

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

可以在localStroage中存储语言状态，点击按钮切换语言: this.$i18n.locale=lang