vue切换中英文

vue中 element+i18n 实现切换中英文

安装 i18n 插件和element

npm install vue-i18n --save-dev  
npm i element-ui -S

在src目录下创建文件

index.js的代码如下

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import enLocale from './lang/en.js'
import chLocale from './lang/cn.js'
import elementEnLocale from 'element-ui/lib/locale/lang/en'
import elementZHLocale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(VueI18n)

const i18n = new VueI18n({
	locale: 'zh',  //默认语言
	messages: {
		en: {
			...enLocale,
			...elementEnLocale
		},
		zh: {
			...chLocale,
			...elementZHLocale
		}
	}
})
export default i18n```

**在main里挂载 ：**
Vue.use(ElementUI, {
    i18n: (key, value) => i18n.t(key, value)
})
Vue.use(ElementUI);

new Vue({
  router,
  i18n, //一定要写上
  store,
  render: h => h(App)
}).$mount('#app')

cn.js里放入你需要转化的中文

module.exports = {
    "button": {
      add:'添加',
      edit:'编辑',
    }
  }

en.js里放入你需要转化的英文

module.exports = {
    "button": {
      add:'add',
      edit:'edit',
    }
  }

在页面中使用的几种方式

在标签上： <p>{{ $t("button.pushOne") }}</p>;
在mounted与methods中：this.$t("button.pushOne");
在js中：window.$t("button.pushOne");

this.$i18n.locale = "zh"; //转为中文
this.$i18n.locale = "en"; //转为英文