【vue-element-admin】4.x 添加 i18n 国际化多语言切换

花裤衩前辈的vue-element-admin模块在4.x的大版本中去除了对i18n国际化的支持，本次因项目需要，在一个基于 vue-element-admin V4.2.1 版本模板开发的项目中，需要加入中英文切换的支持，此处添加参考了 vue-element-admin 模板早期支持国际化版本的语言切换组件，具体步骤如下。

安装 vue-i18n 插件

npm install --save vue-i18n

安装后 package.json 中如下：

node_modules中，如下：

添加自定义配置

创建 src/lang/index.js，其中 elementEnLocale 和 elementZhLocale 是 Element UI 自带的多语言配置，enLocale 和 zhLocale 是自定义的中英文配置，与 src/lang/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 设置默认初始化的语言 i18nlocale: Cookies.get('language') || 'zh',// 将将elementUI语言包 和自定义语言包 加入到插件语言数据里 set locale messagesmessages: {// 英文环境下的语言数据en: {...enLocale,...elementEnLocale},// 中文环境下的语言数据zh: {...zhLocale,...elementZhLocale}}
});export default i18n

en.js示例

export default {route:{dashboard: 'Dashboard',},// 登录页loginPage:{username: 'Username',password: 'Password',login:'Login',}
}

zh.js示例

export default {route: {dashboard: '首页',},loginPage:{username: '请输入用户名',password: '请输入密码',login:'登录',}
}

在 main.js 中挂载 i18n 插件

import i18n from "@/lang/i18n";
Vue.use(Element, {// set element-ui default sizesize: Cookies.get('size') || 'medium',// 配置elementUI 语言转换关系i18n: (key, value) => i18n.t(key, value)
});new Vue({el: '#app',router,store,i18n,render: h => h(App)
});

修改模板(组件)渲染

当我们引入VueI18n语言插件之后，每个组件实例都拥有了一个$t()方法，这个方法可以帮助我们进行语言转换，可以根据当前的语言类型，使用传入的key去寻找当前key对应的文本。
用$t('属性名')来访问配置文件(en.js和ch.js)对象里的属性。这里的$t()是引入了i18n之后，自动挂载在vue实例上的功能。

vuex组件的store模块添加封装方法

src/store/modules/app.js 中添加以下内容

import Cookies from 'js-cookie'const state = {// ...其他配置项省略...// set locale 设置默认初始化的语言 i18nlanguage: Cookies.get('language') || 'zh'
}const mutations = {// ...其他配置项省略...SET_LANGUAGE: (state, language) => {state.language = languageCookies.set('language', language)}
}const actions = {// ...其他配置项省略...setLanguage({ commit }, language) {commit('SET_LANGUAGE', language)}
}export default {namespaced: true,state,mutations,actions
}

注意： app.js 的属性中中配置了命名空间 namespaced: true ，其他组件在通过 this.$store.dispatch() 方法调用时，要在 action 方法名之前加上前缀路径 app/ ，不然会报错 unknown action type:XXX（未知的操作类型:）。

src/store/getters.js 中添加以下内容

const getters = {sidebar: state => state.app.sidebar,size: state => state.app.size,language: state => state.app.language,// ...其他配置项省略...
}
export default getters

添加实现中英文切换的封装组件

组件名：LangSelect

<template><el-dropdown trigger="click" class='international' @command="handleSetLanguage"><div><svg-icon class-name='international-icon' icon-class="language"/></div><el-dropdown-menu slot="dropdown"><el-dropdown-item command="zh" :disabled="language==='zh'">中文</el-dropdown-item><el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item></el-dropdown-menu></el-dropdown>
</template><script>export default {name: "LangSelect",computed: {language() {return this.$store.getters.language}},methods: {handleSetLanguage(lang) {this.$i18n.locale = langthis.$store.dispatch('app/setLanguage', lang)this.$message.success('switch language success')// 重新刷新页面更改语言location.reload()}}}
</script><style scoped>.international-icon {font-size: 20px;cursor: pointer;vertical-align: -5px!important;}
</style>

登录页面添加中英文切换组件

登录页位置 src/views/login/index.vue，添加中英文切换后，登录页面全局代码

<template><div class="fullscreen" :style="'background-color: red;background: url('+loginImgJpgUrl+') ;background-size: cover'"><!--左上角logo--><div class="login-logo" :style="'background: url('+loginLogoImgPngUrl+') no-repeat 10px center'"></div><div class="login-box" :style="'background: url('+loginImgPngUrl+') no-repeat center'"><el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on"label-position="left" style="display: block;"><div class="m-list-group" style=""><el-form-item prop="username"><el-input ref="usernameRef" v-model="loginForm.username":placeholder="$t('loginPage.username')" name="username" type="text"tabindex="1" autocomplete="on" style="width: 280px;margin-left: 412px"><template slot="prepend"><svg-icon style="height: 18px;width: 15px;" color="green" icon-class="user"></svg-icon></template></el-input></el-form-item><el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="bottom" manualstyle="width: 280px;margin-left: 412px"><el-form-item prop="password"><el-input ref="passwordRef" :key="passwordType" v-model="loginForm.password" :type="passwordType":placeholder="$t('loginPage.password')"name="password" tabindex="2" autocomplete="on"@keyup.native="checkCapslock"@blur="capsTooltip = false"@keyup.enter.native="handleLogin"><template slot="prepend"><svg-icon style="height: 18px;width: 15px;" color="green" icon-class="password"></svg-icon></template><template slot="suffix"><div style="color: black;margin-top: 8px;margin-right: 5px" @click="showPwd"><svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"></svg-icon></div></template></el-input></el-form-item></el-tooltip><el-form-item><el-button :loading="loading" type="primary" style="width: 200px;margin-left: 422px;margin-top: 40px"@click.native.prevent="handleLogin">{{$t('loginPage.login')}}</el-button><lang-select class="set-language"></lang-select></el-form-item></div></el-form></div><!--密码修改对话框--><user-update-pwdref="UserUpdatePwdRef":first-login="ifFirstLogin"></user-update-pwd></div>
</template><script>import {validUsername} from '@/utils/validate'import UserUpdatePwd from "@/components/UpdatePwd/UserUpdatePwd";import LangSelect from '@/components/LangSelect'export default {name: 'Login',components: {UserUpdatePwd,LangSelect},data() {// 用户名校验const validateUsername = (rule, value, callback) => {if (!validUsername(value)) {callback(new Error('Please enter the correct user name'))} else {callback()}}// 密码校验const validatePassword = (rule, value, callback) => {if (value.length < 1) {callback(new Error('The password can not be less than 1 digits'))} else {callback()}}return {loginImgJpgUrl: require('./components/login.jpg'),loginImgPngUrl: require('./components/login.png'),loginLogoImgPngUrl: require('./components/logo.png'),// 当前登录账户是否是首次登录ifFirstLogin: false,// 登录表单loginForm: {username: '',password: ''},loginRules: {username: [{required: true, trigger: 'blur', validator: validateUsername}],password: [{required: true, trigger: 'blur', validator: validatePassword}]},passwordType: 'password',capsTooltip: false,loading: false,redirect: undefined,otherQuery: {}}},watch: {$route: {handler: function (route) {const query = route.queryif (query) {this.redirect = query.redirectthis.otherQuery = this.getOtherQuery(query)}},immediate: true}},created() {// window.addEventListener('storage', this.afterQRScan)},mounted() {if (this.loginForm.username === '') {this.$refs.usernameRef.focus()} else if (this.loginForm.password === '') {this.$refs.passwordRef.focus()}},destroyed() {// window.removeEventListener('storage', this.afterQRScan)},methods: {checkCapslock(e) {// console.log('KeyboardEvent-----', e)const {key} = ethis.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')},showPwd() {if (this.passwordType === 'password') {this.passwordType = ''} else {this.passwordType = 'password'}this.$nextTick(() => {this.$refs.passwordRef.focus()})},handleLogin() {this.$refs.loginFormRef.validate(valid => {if (valid) {this.loading = true// 调用vuex的 store 中的 对应的actionthis.$store.dispatch('user/login', this.loginForm).then(res => {// 此处的返回值没有用到，可以不返回console.log('login.vue--user/login--:', res)// console.log('this.redirect---', this.redirect)// console.log('this.otherQuery---', this.otherQuery)let account = res.accountthis.ifFirstLogin = res.ifFirstLoginif (this.ifFirstLogin) {this.$refs.UserUpdatePwdRef.showDialog(account)} else {let ifNotifyUpdatePwd = res.ifNotifyUpdatePwdif (ifNotifyUpdatePwd) {// this.$message.warning('账户长时间未修改密码，请定时更新，确保账户安全!')this.$notify({title: '密码更新提示',dangerouslyUseHTMLString: true,message: '账户' + '<span style="color: red;font-weight: bolder">' + '长时间未修改密码' + '</span>' + '，请定时更新，确保账户安全!',type: 'warning',offset: 100,duration: 30000 // 单位：毫秒，从显示到关闭的时间间隔})}this.$router.push({path: this.redirect || '/', query: this.otherQuery})this.loading = false}}).catch(error => {this.loading = false})} else {console.log('error submit!!')return false}})},getOtherQuery(query) {return Object.keys(query).reduce((acc, cur) => {if (cur !== 'redirect') {acc[cur] = query[cur]}return acc}, {})}}}
</script><style lang="scss">.fullscreen {position: absolute;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}.m-list-group {border-radius: 3px;padding: 0;margin: 120px 0 20px;}.set-language {/*color: #e3e3e3;*//*position: absolute;*//*top: 5px;*/left: 30px;/*right: 0px;*/}.login-box {float: right;position: relative;width: 720px;height: 420px;margin: 0 auto;padding: 0px 15px;}.login-logo {position: absolute;width: 80px;height: 35px;top: 80px;left: 120px;}.login-box .m-input {padding: 10px;border: none;outline: none;box-sizing: border-box;}.login-box .m-btn {border-radius: 5px;font-size: 15px;height: 35px;color: #fff;background-color: #256ddb;display: inline-block;text-align: center;cursor: pointer;outline: none;border: 1px solid #256ddb;box-sizing: border-box;text-decoration: none;}.login-box .m-btn:hover {background-color: #1e4bae;}.login-box .m-btn:active {opacity: 0.8;}@media (max-width: 768px) {.login-box {width: auto;}}
</style>

至此，登录页面添加中英文切换组件完成，可正常替换，全局的自定义中英文对照文档zh.js和en.js需要一点点的完善。原理是将设置的语言种类存储在浏览器的Cookies中作为全局配置参数，每次渲染页面之前i18n插件从浏览器Cookies中获取此配置参数，转换成对应是语言。
同理登录之后，导航栏的右上角页也需要添加一个中英文切换组件，此处就不再赘述了。