vue2项目使用i18n进行中英文切换
vue2中使用i18n,容易实现
·
vue+element 使用i18n进行中英文切换
前言
最近公司一个项目需要给海外用户使用,需要做中英文切换网站,目前只嵌入中文和英文
一、下载vue-i18n插件
npm install vue-i18n
二、定义中英文两套js文件,配置i18n,并在main.js中引入
此处需要使用中文和英文两种语言,新建一个文件夹存放en.js和zh.js两个语言文件
1.en.js
import enLocale from 'element-ui/lib/locale/lang/en'
export default {
"lang": "English",
// 菜单
"menu": {
"media": "media",//媒体
"data": "data",//数据
"docking": "docking",//对接
},
...enLocale
}
2.zh.js
import zhLocale from 'element-ui/lib/locale/lang/en'
export default {
"lang": "中文",
// 菜单
"menu": {
"media": "媒体",//媒体
"data": "数据",//数据
"docking": "对接",//对接
"operator": "当前操作账号:",//当前操作账号
},
...zhLocale
}
注:zh.js和en.js引入zhLocale和enLocale,是为了使element-ui组件也进行中英文切换
3.index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import locale from 'element-ui/lib/locale'
import zh from './zh'
import en from './en'
Vue.use(VueI18n)
const messages = {
en: {
...en,
},
zh: {
...zh,
}
};
const i18n = new VueI18n({
locale: localStorage.lang || 'zh',
messages,
});
locale.i18n((key, value) => i18n.t(key, value))
export default i18n;
4.mian.js
import i18n from '@/i18n/index'
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount('#app')
三、通过点击事件切换语言
<el-dropdown class="lang" trigger="click" @command="langChange">
<span class="el-dropdown-link">
{{language}} <i class="el-icon-caret-bottom"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item divided command="zh">中文</el-dropdown-item>
<el-dropdown-item divided command="en">English</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
// 中英文切换
langChange(command) {
this.$i18n.locale = command
localStorage.setItem("lang", command)
if(command == 'en') {
this.language = 'English'
} else if (command == 'zh') {
this.language = '中文'
}
},
四、i18n使用–数据渲染
1.dom中使用
<el-input :placeholder="$t('menu.media')" v-model="name">
<el-button>{{$t('menu.media')}}</el-button>
</el-input>
2、js中使用
handleView(index, row) {
this.title = this.$t('common.lookApp')
}
3、filter过滤器中使用
(filter中不能使用this,所以可以传入$i18n,或者可以在外部定义that=this)
<el-table-column :label="$t('menu.media')" align="center">
<template slot-scope="scope">
{{scope.row.status_info.status | filterStatus($i18n)}}
</template>
</el-table-column>
<script>
export default {
filters:{
filterStatus(status, type) {
let str = ""
switch(status) {
case 1 :
str = type.t('status.checkPending');
break;
case 2 :
str = type.t('status.approved');
break;
case 3 :
str = type.t('status.rejected');
break;
}
return str;
},
},
}
</script>
4、 rules中使用(可以在computed中定义)
computed: {
rules() {
return {
name: [
{ required: true, message: this.$t('required.name'), trigger: 'blur' }
],
}
}
}
五、最终效果
中文:
英文:
注意事项(重要!!!)
当时我的项目是vue2版本的,我在安装i18n插件的时候,使用总是出错,正常引入,在Vue.use时就会报错
查了资料,问了大佬才知道,i18n官网明确了使用版本,vue2和vue3分别不一样,vue2使用8版本,vue3使用9版本,这个坑啊,我一安装就是高版本,vue2承担不起啊!后来改成正确版本号就能正常运行了。
更多推荐
已为社区贡献2条内容
所有评论(0)