VueI18n中英文切换 vue2.0

1: npm install --save [email protected]  （版本不要高了，不然报错）

2：创建相关文件

 

3：main.js文件配置

//i18n插件
import VueI18n from 'vue-i18n'
// element-ui多语言文件
import locale from 'element-ui/lib/locale';

// 本地多语言文件
import zh from "./language/zh";
import en from "./language/en";

Vue.use(VueI18n);

const i18n = new VueI18n({
/* 获取当前语言环境 ，自己可在全局配置和修改好存到sessionStorage中*/
    locale: sessionStorage.getItem('locale') || 'en',
    messages: {
        zh: zh,
        en: en
    }
});


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


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

4：页面使用（以导航栏为例）

左边路由是循环的，所以data中的数据需要特殊设计

name统一为语言文件中对呀的key

	

      
	   {{$t("header."+item.name)}}
	

input 输入款的占位符使用

普通状态使用  

{{$t("header.title")}}

在js中使用

使用前

使用后

async handleLogout() {
				this.$confirm(this.$t("pop.logoutext"), this.$t("pop.tips"), {
					confirmButtonText: this.$t("pop.confirm"),
					cancelButtonText: this.$t("pop.cancel"),
					type: 'warning'
				}).then(() => {
					this.$store.dispatch('FedLogOut').then(() => {
						location.href = '/index';
					})
				}).catch(() => {});
			},