详解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只在项目第一次进入的时候调用，当切换语言的时候菜单字段不会动态切换，只有刷新浏览器才会改变，如有解决方法希望留言告知！！！

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注的更多内容!