vue中多语言切换

下载 vue-i18n

npm i vue-i18n

在assets 中创建lang 文件夹
在lang 文件夹中 zh.js 和 en.js
zh.js

export const main = {
    white: '亮丽',
    black: "深沉",
    add: "添加",
    del: "删除",
    delALL: "全部删除",
    edit: "编辑",
    cancel: "取消",
    select: "选用",
    check: "查看",
    operate: "操作",
}

en.js

export const main = {
    white: 'white', //亮丽
    black: "black", //黑色
    add: "add", //添加
    del: "del", //删除
    delALL: "del All", //全部删除
    edit: "edit ", //编辑
    cancel: "cancel", //取消
    select: "select", //选用
    check: "check", //查看
    operate: "operate", //操作
}

下载 main.js文件中添加

import vueI18n from 'vue-i18n'
Vue.use(vueI18n)
const locale=localStorage.getItem('lang')
const i18n=new vueI18n({
	locale:locale||'zh',
	messages:{
		'zh':require('@/assets/lang/zh'),
		'en':require('@/assets/lang/en'),
	}
})
//在最后
new Vue({
	router,
	store,
	i18n,//添加这一行
	render:h=>h(App)
}).$mount('#app')

在页面适当位置添加切换操作

<el-dropdown @command='language'>
	<span class='el-dropdown-link'>语言</span>
	<el-dropdown-menu slot='dropdown'>
		<el-dropdown-item command='zh'>中文</el-dropdown-item>
		<el-dropdown-item command='en'>英文</el-dropdown-item>
	</el-dropdown-menu>
</el-dropdown>
事件
language（val）{
	this.$ii8n.locale=val
	localStorage.setItem("lang",val)
}

使用:在需要切换语言的粘贴如下代码

{{$t('main.add')}}//add 是zh.js和en.js 定义的 key 项