这次我们主要来学习vue的多语言化支持
1. 国际化的处理方案(i18n)
i18n（其来源是英文单词 internationalization的首末字符i和n，18为中间的字符数）是“国际化”的简称。
vue项目中的多语言支持使用的是vue-i18n
1.1在项目中安装好依赖包
npm i vue-i18n@8.22.2
1.2创建src/lang/index.js
固定写法,可在vue项目中直接使用
// 进行多语言支持配置import Vue from 'vue' // 引入Vueimport VueI18n from 'vue-i18n' // 引入国际化的插件包import locale from 'element-ui/lib/locale'import elementEN from 'element-ui/lib/locale/lang/en' // 引入饿了么的英文包import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入饿了么的中文包Vue.use(VueI18n) // 全局注册国际化包// 创建国际化插件的实例const i18n = new VueI18n({// 指定语言类型 zh表示中文 en表示英文locale: 'zh',// 将elementUI语言包加入到插件语言数据里messages: {// 英文环境下的语言数据en: {...elementEN},// 中文环境下的语言数据zh: {...elementZH}}})// 配置elementUI 语言转换关系locale.i18n((key, value) => i18n.t(key, value))export default i18n
1.3在main.js中挂载 i18n的插件
import i18n from '@/lang'new Vue({el: '#app',router,store,i18n,render: h => h(App)})
1.4修改模板渲染
<div class="app-breadcrumb">{{ $t('panyName') }}<span class="breadBtn">测试版</span></div>
1.5手动在lang/index.js中修改图下所示的内容,例如:我下载了饿了么的日文包,下面的locale就为ja,
中文则为zh,英文则为en.
**需注意:ElementUI 的组件只会对组件自身的很少一部分进行多语言化支持
例如:
1.6封装多语言组件
在放置公共组件的位置：src/components/Lang/index.vue
需注意：icon-class="language" 需要在src\icons\svg\下有一个名为language.svg的文件
<template><el-dropdown trigger="click" @command="changeLanguage"><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>export default {methods: {changeLanguage(lang) {this.$i18n.locale = lang // 设置给本地的i18n插件this.$message.success('切换多语言成功')}}}</script>
1.7全局注册
在 component/index.js ( 这个文件是我把需要全局注册的组件 集中注册,再在main.js 中进行全局注册 ) 中进行全局组件注册
1.8在需要的组件中引入即可.
