1.下包(我是vue2)
yarn add vue-i18n@8.2.1 --save
2.建多语言实例化文件
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookie from 'js-cookie'
import elementEN from 'element-ui/lib/locale/lang/en'
import elementZH from 'element-ui/lib/locale/lang/zh-CN'
import elementJA from 'element-ui/lib/locale/lang/ja'
import customZH from '@/lang/zh'
import customEN from '@/lang/en'
Vue.use(VueI18n)
export default new VueI18n({
locale: Cookie.get('language') || 'zh',
messages: {
en: {
...elementEN,
...customEN
},
zh: {
...elementZH,
...customZH
},
ja: {
...elementJA
}
}
})
3.在main.js中挂载插件
import i18n from '@/lang/index'
new Vue({
i18n
})
Vue.use(ElementUI, {
i18n: (key, value) => i18n.t(key, value)
})
4.封装多语言组件
<!--封装多语言组件-->
<template>
<el-dropdown trigger="click" @command="changeLanguage">
<!-- 这里必须加一个div -->
<div>
<svg-icon style="color:#fff;font-size:20px" icon-class="language" />
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="zh" :disabled="'zh'=== $i18n.locale ">中文</el-dropdown-item>
<el-dropdown-item command="en" :disabled="'en'=== $i18n.locale ">en</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
import Cookie from 'js-cookie'
export default {
methods: {
changeLanguage(lang) {
Cookie.set('language', lang)
this.$i18n.locale = lang
this.$message.success('切换多语言成功')
}
}
}
</script>