vue element plus多语言切换怎么实现

这篇文章主要讲解了“Vue element plus多语言切换怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“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 localeexport 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( '@/views/mainManage/device')      },

感谢各位的阅读，以上就是“vue element plus多语言切换怎么实现”的内容了，经过本文的学习后，相信大家对vue element plus多语言切换怎么实现这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！