一、实现效果
二、下载插件创建文件夹
2.1 下载cookie来存储
npm install --save js-cookienpm i vue-i18n -S2.2 封装组件多页面应用
2.3 创建配置语言包字段
三、示例代码
3.1 main.js 引用 i18n.js
import i18n from './lang'// 实现语言切换:i18n处理element，根据locale属性去寻找显示内容
Vue.use(Element, {i18n: (key, value) => i18n.t(key, value),
})new Vue({i18n,render: (h) => h(App),
})3.2 封装组件：src\components\LangSelect\index.vue
<template><el-dropdown trigger="click" @command="handleSetLanguage"><div><div class="lang_img"><img src="@/assets/ch-en.png" alt="语言切换" title="语言切换" /></div></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">English</el-dropdown-item></el-dropdown-menu></el-dropdown>
</template><script>import Cookies from 'js-cookie'export default {methods: {// 中英文语言切换handleSetLanguage(lang) {Cookies.set('language', lang) // 切换多语言this.$i18n.locale = lang // 设置给本地的i18n插件this.$message({message: this.$t('public.switch'),type: 'success',})},},}
</script>
<style lang="scss" scoped>.lang_img {margin-right: 10px;cursor: pointer;img {width: 25px;height: 25px;}}
</style>3.3 导入配置的字段：src\lang\index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN' // element-ui lang
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import zhLocale from './zh'
import enLocale from './en'Vue.use(VueI18n)export default new VueI18n({locale: Cookies.get('language') || 'zh', // 从cookie缓存中获取语言类型 获取不到就是中文messages: {en: {...enLocale, // 引入英文语言包...elementEnLocale, // 引入自定义的语言包},zh: {...zhLocale, // 引入中文语言包...elementZhLocale,},},
})3.4 中文字段：src\lang\zh.js
export default {index: '首页',helpmenu: '帮助', public: {MoreActions: '更多操作',CloseAll: '关闭所有',switch: '切换语言成功',},
}
3.5 英文字段：src\lang\en.js
export default {index: 'Home',helpmenu: 'Help Menu', public: {MoreActions: 'More Actions ', CloseAll: 'Close All',switch: 'Successfully Switched Language',},
}
zh.js和en.js中的变量名称要对应起来
四、使用语言包功能
4.1 页面使用组件
<template><div><LangSelect /> // 使用</div>
</template><script>import LangSelect from '@/components/LangSelect' // 导入export default { components: { // 注册LangSelect, },}
</script>4.2 替换页面中的字段
1、{{$t('index')}}2、:placeholder="$t('public.switch')"3、:label="$t('public.switch')"4、message: this.$t('public.switch'),
