详解vue element plus多语言切换
更新时间：2021年12月09日 15:28:43 作者：眼小博
这篇文章主要为大家介绍了vue element plus多语言切换，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
前言
最近接手一个项目，该项目多国家使用，需要支持多语言的切换，在此记录。
解决一下问题：
- 如何实现多语言切换 ？
- 如何动态切换语言并更改elementUI语言 ？
- 更改完elementUI组件视图不更新？
- 如何全局使用 $t 函数 ？
- 如何在js文件里使用vue-i18n ？
如何实现多语言切换 ？
1、安装包vue-i18n
npm i vue-i18n --save
2、在src目录下新建如图：
en.js
const EN = {
login: {
title: 'User Login'
},
}
export default EN
pl-pl.js
const PL_PL = {
login: {
title: 'Użytkownik jest zalogowany'
},
}
export default PL_PL
zh-cn.js
const ZH_CN = {
login: {
title: '用户登录'
},
}
export default ZH_CN
index.js
import { createI18n } from 'vue-i18n/index'
import 'dayjs/locale/zh-cn'
import zh from './zh-cn'
import en from './en'
import pl from './pl-pl'
const messages = {
'zh-cn': zh,
'en': en,
'pl': pl
}
// Gets the current locale
export function getLanguage() {
// Use the language of choice
const chooselang = localStorage.getItem('locale')
if (chooselang) return chooselang
// if not shoose language
const lang = (navigator.language || navigator.browserLanguage).toLowerCase()
const locales = Object.keys(messages)
return locales.includes(lang) ? lang : 'zh-cn'
}
const i18n = createI18n({
locale: getLanguage(),
fallbackLocale: 'en',
global: true,
messages
})
export function $t(args) {
return i18n.global.tc(args)
}
console.log($t('login.title'))
export default (app) => {
app.use(i18n)
}
说明
getLanguage 函数 判断当前localStorage是否已有选择过语言如果没有则获取当前浏览器的语言；
封装 $t 函数并导出用在js文件中
3、 在main.js中
import language, { getLanguage, $t } from './language'
language(app)
4、在vue文件中使用
<template>
//1.
<div class="login clamp ta-c fs-28 fw-b m-b10">{{ $t('login.title') }}</div>
//2.
<el-input v-model="$t('login.title')"></el-input>
</template>
如何动态切换语言并更改elementUI语言 ？
1、利用vuex，在mutations中写一个方法更改element语言
// ----------------------- state -----------------------------
import { getLanguage } from '@/language'
const state = {
lang: getLanguage()
}
export default state
// ----------------------- mutations-----------------------------
import * as Types from './types'
import locale from 'element-plus/lib/locale'
import localeZH from 'element-plus/lib/locale/lang/zh-cn'
import localeEN from 'element-plus/lib/locale/lang/en'
import localePL from 'element-plus/lib/locale/lang/pl'
const element = {
'zh-cn': localeZH,
'en': localeEN,
'pl': localePL
}
const mutations = {
// 切换语言
[Types.SET_LANG](state, lang) {
state.lang = lang
localStorage.setItem('locale', lang)
locale.use(element[lang])
}
}
export default mutations
// ----------------------- types-----------------------------
export const SET_LANG = 'SET_LANG'
2、使用
import * as Types from '@/store/types'
import { useI18n } from "vue-i18n";
export default {
setup(props,ctx) {
const { locale: lang } = useI18n({ useScope: "global" })
let store = useStore()
const handelLanguage = (name) => {
lang.value = name
store.commit(Types.SET_LANG, name)
}
return {
handelLanguage
}
}
}
更改完elementUI组件视图不更新？
这时你会发现就算我们提交commit去更改elementUI的语言 页面上也没有发生变化，因为视图组件并没有更新，如何刷新组件使之重新加载呢？
1、 在router-view上控制视图显示/隐藏
// ----------------------- template-----------------------------
<router-view v-if="isReloadRouter"/>
// ----------------------- script-----------------------------
const reload = () => {
state.isReloadRouter = false
nextTick(() => {
state.isReloadRouter = true
})
}
provide("reload", reload)
<-- 自行引入 provide nextTick ->
2、 在切换语言时调用reload
const handelLanguage = (name) => {
lang.value = name
store.commit(Types.SET_LANG, name)
inject('reload')()
}
3、需在main.js中调用一下commit，不然第一次进入elementUI 不会更改语言
import language, { getLanguage, $t } from './language'
import '@/styles/elementDefault.scss'
store.commit(Types.SET_LANG, getLanguage())
如何全局使用 $t 函数 ？ 如何在js文件里使用vue-i18n ？
全局挂在 $t 函数 ，在js文件里直接使用 $t 函数。
方法一：通过app.config.globalProperties挂在到全局
方法二： 通过provide、inject来实现
import language, { getLanguage, $t } from './language'
const app = createApp(App);
// ----------------------- app.config.globalProperties -----------------------------
app.config.globalProperties.$t = $t
// 使用
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
proxy.$t()
// ----------------------- provide、inject -----------------------------
// main.js中
app.provide('$t', $t)
// 使用
const $t = inject('$t')
ElMessage.warning({
message: $t('login.warnMessage'),
type: 'warning'
});
vue3不推荐在原型链上挂载一些东西，而更推荐使用provide、inject，所以最好使用通过依赖和注入provide和inject的方式
在router.js中不能直接使用$t, 需自行引入该函数
import { $t } from '@/language'
{
path: '/mainManage/device',
name: 'device',
hidden: false,
meta: { icon: 'circle', title: $t('router.device') },
component: () =>
import(/* webpackChunkName: "device" */ '@/views/mainManage/device')
},
目前有一问题：因为我菜单展示的字段取的是路由信息里的title，router.js只在项目第一次进入的时候调用，当切换语言的时候菜单字段不会动态切换，只有刷新浏览器才会改变，如有解决方法希望留言告知！！！
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
相关文章
这篇文章主要介绍了详解关于Vuex的action传入多个参数的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了Vue + Elementui实现多标签页共存的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06
本篇文章主要介绍了Vue axios 中提交表单数据(含上传文件)，具有一定的参考价值，有兴趣的可以了解一下2017-07-07
这篇文章主要介绍了vue-cli随机生成port源码的方法，文中给大家介绍了vue 随机色生成方法,需要的朋友可以参考下2019-09-09
vue.config.js文件devServer字段的常用选项详解
在 Vue CLI 生成的 vue.config.js 文件中,devServer 字段用于配置开发服务器的选项,本文给大家介绍vue.config.js文件devServer字段的常用选项,感兴趣的朋友一起看看吧2023-11-11
vscode中vue代码提示与补全没反应解决(vetur问题)
这篇文章主要给大家介绍了关于vscode中vue代码提示与补全没反应解决(vetur问题)的相关资料,文中通过图文将解决的方法介绍的非常详细,需要的朋友可以参考下2023-03-03
函数式弹窗是一种使用函数来创建弹窗的技术,它可以简化弹窗的使用,只需要在需要弹窗的地方调用函数就可以了,下面我们就来看看vue3中函数式弹窗的具体应用吧2024-01-01
这篇文章主要介绍了详解Vue CLI3配置解析之css.extract,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
vue项目预览excel表格功能(file-viewer插件)
这篇文章主要介绍了vue项目预览excel表格功能(file-viewer插件),本文分步骤结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-10-10
vue.config.js中devServer.proxy配置说明及配置正确不生效问题解决
Vue项目devServer.proxy代理配置详解的是一个非常常见的需求,下面这篇文章主要给大家介绍了关于vue.config.js中devServer.proxy配置说明及配置正确不生效问题解决的相关资料,需要的朋友可以参考下2023-02-02
最新评论