詳解vue element plus多語言切換

阿新 • • 發佈：2021-12-10

前言

最近接手一個專案，該專案多國家使用，需要支援多語言的切換，在此記錄。

解決一下問題：

如何實現多語言切換？
如何動態切換語言並更改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: 'Uytkownik 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 'elehttp://www.cppcns.comment-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 = useStwww.cppcns.comore()
    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)www.cppcns.com => {
      lang.value = name
      store.commit(Types.SET_LANG,name)
      inject('reload')()
    }

3、需在main.js中呼叫一下commit，不然第一次進入elementUI 不會更改語言

import language,$t } from './language'
import '@/styles/elementDefault.s'
store.commit(Types.SET_LANG,getLanguage())

如何全域性使用 $t 函式？如何在js檔案裡使用vue-i18n ？

全域性掛在 $t 函式，在js檔案裡直接使用 $t 函式。

方法一：通過app.config.globalProperties掛在到全域性

方法二：通過provide、inject來實現

import language,$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.jshttp://www.cppcns.com中不能直接使用$t,需自行引入該函式

import { $t } from '@/language'
{
        path: '/mainManage/device',name: 'device',hidden: false,meta: { icon: 'circle',title: $t('router.device') },component: () =>www.cppcns.com;
          import(/* webpackChunkName: "device" */ '@/views/mainManage/device')
      },

目前有一問題：因為我選單展示的欄位取的是路由資訊裡的title，router.js只在專案第一次進入的時候呼叫，當切換語言的時候選單欄位不會動態切換，只有重新整理瀏覽器才會改變，如有解決方法希望留言告知！！！