vue中使用VueI18n插件实现页面中英文切换

1、在项目的根目录中安装插件 npm install vue-i18n
2、新建文件夹与文件存放自己配置的语言包，我这里新建的是lang文件夹
zh.js为中文语言包 en.js为英文语言包 文件夹与文件可以随便命名，但在引用的时候需要写自己新建的文件夹与文件 ，如图所示

3、入口文件main.js中引入并安装和配置该插件

import VueI18n from 'vue-i18n' //引入
Vue.use(VueI18n) //安装
const i18n =new VueI18n({
	locale:'zh-CN' ,//定义为默认中文
	messages:{
		'zh':require('./lang/zh') ,//中文语言包
		'en-US':require('./lang/en') //英文语言包
	}
})

4、在 zh.js中配置某些变量对应的中文名称 ，在en.js中配置变量对应的英文名称
注意同一个名称的字段在zh.js与en.js中声明的变量应一样 例
zh.js中

//中文包  导出的变量 x 可以随便命名 建议简短一点（这样在页面中使用的时候就少写一点代码）
export const x = { 
	queren:'确认',
	jianjie:'简介'
}

en.js中

//英文包 
export const x = {
	queren:'confirm',//确认
	jianjie:'Introduction',//简介
}

页面中使用如下语法
HTML

<el-button>{{$t('m.confirm')}}</el-button>
<-- 绑定动态变量使用方式如下 -->
<el-input type="password"  :placeholder="$t('m.jianjie')"></el-input>

用户点击切换语言时执行如下代码
HTML

<-- element组件中的下拉框选择  不知道的老铁可以去element官网看一下-->
<-- command 点击菜单项触发的事件回调 -->
<-- 自己手写下拉框的老铁 js实现的原理都差不多，根据用户选择的语言来切换语言包 -->
<el-dropdown trigger="click" @command="cut">
  <span class="el-dropdown-link">
    {{language}}<i class="el-icon-caret-bottom"></i>
  </span>
  <el-dropdown-menu slot="dropdown" >
     <el-dropdown-item command="English">English</el-dropdown-item> 
    <el-dropdown-item command='中文'>中文</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

下拉框效果图如下

JS

data(){
	return {
		language:'中文'
	}
}
//用户点击选择的语言
cut(event){
	if (event == "English") { //英文
		this.language=event
		this.$i18n.locale = 'en-US'; //关键语句
	} else if(event=='中文'){ //中文
		this.language=event
		this.$i18n.locale = 'zh-CN'; //关键语句
	}
	//下面这一步可以不用 因为我的项目中需要对一些页面进行特殊处理，
	//所以要读取当前用户选择的是什么语言
	this.$store.commit('$_language',event) //同步到状态管理中 
},

到这里就大功告成了，没有理解到的老铁可以下方评论，我会第一时间回应的