耀极客论坛

 找回密码
 立即注册
查看: 3746|回复: 0

详解vue element plus多语言切换

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220553
发表于 2022-5-9 02:41:12 | 显示全部楼层 |阅读模式
  这篇文章主要为大家介绍了vue element plus多语言切换,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

前言
  最近接手一个项目,该项目多国家使用,需要支持多语言的切换,在此记录。

  解决一下问题:
       
  • 如何实现多语言切换 ?   
  • 如何动态切换语言并更改elementUI语言 ?   
  • 更改完elementUI组件视图不更新?   
  • 如何全局使用 $t 函数 ?   
  • 如何在js文件里使用vue-i18n ?

如何实现多语言切换 ?

1、安装包vue-i18n
  1. npm i vue-i18n --save
复制代码
2、在src目录下新建如图:

  en.js
  1. const EN = {
  2.   login: {
  3.     title: 'User Login'
  4.   },
  5. }
  6. export default  EN
复制代码
  pl-pl.js
  1. const PL_PL = {
  2.   login: {
  3.     title: 'Użytkownik jest zalogowany'
  4.   },
  5. }
  6. export default  PL_PL
复制代码
  zh-cn.js
  1. const ZH_CN = {
  2.   login: {
  3.     title: '用户登录'
  4.   },
  5. }
  6. export default  ZH_CN
复制代码
  index.js
  1. import { createI18n } from 'vue-i18n/index'
  2. import 'dayjs/locale/zh-cn'
  3. import zh from './zh-cn'
  4. import en from './en'
  5. import pl from './pl-pl'
  6. const messages = {
  7.   'zh-cn': zh,
  8.   'en': en,
  9.   'pl': pl
  10. }
  11. // Gets the current locale
  12. export function getLanguage() {
  13.   // Use the language of choice
  14.   const chooselang = localStorage.getItem('locale')
  15.   if (chooselang) return chooselang
  16.   // if not shoose language
  17.   const lang = (navigator.language || navigator.browserLanguage).toLowerCase()
  18.   const locales = Object.keys(messages)
  19.   return locales.includes(lang) ? lang : 'zh-cn'
  20. }
  21. const i18n = createI18n({
  22.   locale: getLanguage(),
  23.   fallbackLocale: 'en',
  24.   global: true,
  25.   messages
  26. })
  27. export function $t(args) {
  28.   return i18n.global.tc(args)
  29. }
  30. console.log($t('login.title'))
  31. export default (app) => {
  32.   app.use(i18n)
  33. }
复制代码
  说明
  1. getLanguage 函数 判断当前localStorage是否已有选择过语言如果没有则获取当前浏览器的语言;
  2. 封装 $t 函数并导出用在js文件中
复制代码
3、 在main.js中
  1. import language, { getLanguage, $t } from './language'
  2. language(app)
复制代码
4、在vue文件中使用
  1. ‹template>
  2.     //1.
  3. ‹div class="login clamp ta-c fs-28 fw-b m-b10">{{ $t('login.title') }}‹/div>
  4. //2.
  5. ‹el-input v-model="$t('login.title')">‹/el-input>
  6. ‹/template>
复制代码
如何动态切换语言并更改elementUI语言 ?

1、利用vuex,在mutations中写一个方法更改element语言
  1. // ----------------------- state -----------------------------
  2. import { getLanguage } from '@/language'
  3. const state = {
  4.   lang: getLanguage()
  5. }
  6. export default state
  7. // ----------------------- mutations-----------------------------
  8. import * as Types from './types'
  9. import locale from 'element-plus/lib/locale'
  10. import localeZH from 'element-plus/lib/locale/lang/zh-cn'
  11. import localeEN from 'element-plus/lib/locale/lang/en'
  12. import localePL from 'element-plus/lib/locale/lang/pl'
  13. const element = {
  14.   'zh-cn': localeZH,
  15.   'en': localeEN,
  16.   'pl': localePL
  17. }
  18. const mutations = {
  19.   // 切换语言
  20.   [Types.SET_LANG](state, lang) {
  21.     state.lang = lang
  22.     localStorage.setItem('locale', lang)
  23.     locale.use(element[lang])
  24.   }
  25. }
  26. export default mutations
  27. // ----------------------- types-----------------------------
  28. export const SET_LANG = 'SET_LANG'
复制代码
2、使用
  1. import * as Types from '@/store/types'
  2. import { useI18n } from "vue-i18n";
  3. export default {
  4.   setup(props,ctx) {
  5.     const { locale: lang } = useI18n({ useScope: "global" })
  6.     let store = useStore()
  7.     const handelLanguage = (name) => {
  8.       lang.value = name
  9.       store.commit(Types.SET_LANG, name)
  10.     }
  11.     return {
  12.       handelLanguage
  13.     }
  14.   }
  15. }
复制代码
更改完elementUI组件视图不更新?
  这时你会发现就算我们提交commit去更改elementUI的语言 页面上也没有发生变化,因为视图组件并没有更新,如何刷新组件使之重新加载呢?

1、 在router-view上控制视图显示/隐藏
  1. // ----------------------- template-----------------------------
  2. ‹router-view v-if="isReloadRouter"/>
  3. // ----------------------- script-----------------------------
  4. const reload = () => {
  5. state.isReloadRouter = false
  6.      nextTick(() => {
  7.        state.isReloadRouter = true
  8.      })
  9. }
  10. provide("reload", reload)
  11. ‹-- 自行引入 provide nextTick ->
复制代码
2、 在切换语言时调用reload
  1. const handelLanguage = (name) => {
  2.       lang.value = name
  3.       store.commit(Types.SET_LANG, name)
  4.       inject('reload')()
  5.     }
复制代码
3、需在main.js中调用一下commit,不然第一次进入elementUI 不会更改语言
  1. import language, { getLanguage, $t } from './language'
  2. import '@/styles/elementDefault.scss'
  3. store.commit(Types.SET_LANG, getLanguage())
复制代码
如何全局使用 $t 函数 ? 如何在js文件里使用vue-i18n ?
  全局挂在 $t 函数 ,在js文件里直接使用 $t 函数。

  方法一:通过app.config.globalProperties挂在到全局

  方法二: 通过provide、inject来实现
  1. import language, { getLanguage, $t } from './language'
  2. const app = createApp(App);
  3. // ----------------------- app.config.globalProperties -----------------------------
  4. app.config.globalProperties.$t = $t
  5. // 使用
  6. import { getCurrentInstance } from 'vue'
  7. const { proxy } = getCurrentInstance()
  8. proxy.$t()
  9. // ----------------------- provide、inject -----------------------------
  10. // main.js中
  11. app.provide('$t', $t)
  12. // 使用
  13. const $t = inject('$t')
  14. ElMessage.warning({
  15.   message: $t('login.warnMessage'),
  16.    type: 'warning'
  17. });
复制代码
  1. vue3不推荐在原型链上挂载一些东西,而更推荐使用provide、inject,所以最好使用通过依赖和注入provide和inject的方式
复制代码
在router.js中不能直接使用$t, 需自行引入该函数
  1. import { $t } from '@/language'
  2. {
  3.         path: '/mainManage/device',
  4.         name: 'device',
  5.         hidden: false,
  6.         meta: { icon: 'circle', title: $t('router.device') },
  7.         component: () =>
  8.           import(/* webpackChunkName: "device" */ '@/views/mainManage/device')
  9.       },
复制代码
  目前有一问题:因为我菜单展示的字段取的是路由信息里的title,router.js只在项目第一次进入的时候调用,当切换语言的时候菜单字段不会动态切换,只有刷新浏览器才会改变,如有解决方法希望留言告知!!!

总结

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


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-29 05:11 , Processed in 0.073763 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表