elementplus国际化源码分析 element ui国际化切换

       后台系统中，常常遇到实现中英文切换的功能，vue-element-admin官方文档中也介绍了如何添加国际化，今天来详细说明：

        Ⅰ 实现效果：

               中文：                

                 英文：

下面直接上步骤：

        一、下载安装

 npm install vue-i18n@8.24.5 -S 

在此要注意版本号

       二、新增文件

src下新建文件夹lang，在文件夹lang中分别新建不同语音的js文件，具体如下图:

                

                 其中index.js:

                        ` 

          代码如下：

// 进行多语言支持配置
import Vue from 'vue' // 引入Vue
import VueI18n from 'vue-i18n' // 引入国际化的插件包
import Cookies from 'js-cookie' // 引入 Cookies 保存当前默认语言选项

import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui 英文包
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui 中文包

// 自定义的中英文配置
import enLocale from './en'
import zhLocale from './zh'


Vue.use(VueI18n); // 全局注册国际化包

// 创建国际化插件的实例
const i18n = new VueI18n({
  // 指定语言类型 zh表示中文  en表示英文 set locale 设置默认初始化的语言 i18n
  locale: Cookies.get('language') || 'zh',
  // 将将elementUI语言包 和自定义语言包 加入到插件语言数据里 set locale messages
  messages: {
    // 英文环境下的语言数据
    en: {
      ...enLocale,
      ...elementEnLocale
    },
    // 中文环境下的语言数据
    zh: {
      ...zhLocale,
      ...elementZhLocale
    }
  }
});

export default i18n

          en.js和zh.js文件中分别放入对应的不同语言，如下图：

        ② 在utils文件中新建i18.js文件夹

        代码：

// 翻译router.meta。标题，用于面包屑侧边栏tagsview
export function generateTitle(title) {
  const hasKey = this.$te('route.' + title)

  if (hasKey) {
    // $t :this method from vue-i18n, inject in @/lang/index.js
    const translatedTitle = this.$t('route.' + title)

    return translatedTitle
  }
  return title
}

         三、配置

main.js文件中添加图中红框中内容

                

            部分代码：

import i18n from './lang'

Vue.use(ElementUI, {
	i18n: (key, value) => i18n.t(key, value)
})

配置store文件夹

app.js文件添加下图红框内容：

        单独代码：

language: Cookies.get('language') || 'zh'

// ...其他配置项省略...
	SET_LANGUAGE: (state, language) => {
		state.language = language
		Cookies.set('language', language)
	}

// ...其他配置项省略...
	setLanguage({
		commit
	}, language) {
		commit('SET_LANGUAGE', language)
	},

    getters.js文件夹添下图内容：

                 部分代码：

language: state => state.app.language,
	size: state => state.app.size,

        三、页面应用

                ① 在顶部加入语音选择下拉框，（实际添加位置以自己项目所需的位置即可）

                 语言选择下拉框组件：

                 代码：

<template>
	<el-dropdown trigger="click" class="international" @command="handleSetLanguage">
		<div>
			请选择语言
		</div>
		<el-dropdown-menu slot="dropdown">
			<el-dropdown-item :disabled="language==='zh'" command="zh">中文</el-dropdown-item>
			<el-dropdown-item :disabled="language==='en'" command="en">English</el-dropdown-item>
		</el-dropdown-menu>
	</el-dropdown>
</template>

<script>
	export default {
		name: "LangSelect",
		computed: {
			language() {
				return this.$store.getters.language
			}
		},
		data(){
			return{
				
			}
		},
		created() {
		},
		watch:{
			
		},
		methods: {
			handleSetLanguage(lang) {
				this.$i18n.locale = lang;
				this.$store.dispatch('app/setLanguage', lang)
				this.$message.success('switch language success')
			}
		}
	}
</script>

<style>
</style>

                 ② 在页面通过$t('')来渲染，如下图：

         四、当然一个项目完全转换还需要转换侧边栏，面包屑等，下面来展示侧边栏如何转换：

               找到侧边栏页面，添加页面内容：         

注：① 一定要在methods中声明该方法！

             ② 英文的翻译名称与路由中的meta中title一致！

        最后如果通过循环来展示数据的，在js 中写到computed方法中即可实现，例如：

 

this.$store.getters.language来获取，