详解vue element plus多语言切换

目录

• 前言
• 如何实现多语言切换 ？
• 1、安装包vue-i18n
• 2、在src目录下新建如图：
• 3、 在main.js中
• 4、在vue文件中使用
• 如何动态切换语言并更改elementUI语言 ？
• 1、利用vuex，在mutations中写一个方法更改element语言
• 2、使用
• 更改完elementUI组件视图不更新？
• 1、 在router-view上控制视图显示/隐藏
• 2、 在切换语言时调用reload
• 3、需在main.js中调用一下commit，不然第一次进入elementUI 不会更改语言
• 如何全局使用 $t 函数 ？ 如何在js文件里使用vue-i18n ？
• 在router.js中不能直接使用$t, 需自行引入该函数
• 总结

npm i vue-i18n --save

const EN = {
  login: {
    title: "User Login"
  },
}
export default  EN

const PL_PL = {
  login: {
    title: "Użytkownik jest zalogowany"
  },
}
export default  PL_PL

const ZH_CN = {
  login: {
    title: "用户登录"
  },
}
export default  ZH_CN

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) &＃63; 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)
}

import language, { getLanguage, $t } from "./language"
language(app)

// ----------------------- 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"

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
    }
  }
}

// ----------------------- template-----------------------------

// ----------------------- script-----------------------------
const reload = () => {
	 state.isReloadRouter = false
     nextTick(() => {
       state.isReloadRouter = true
     })
}
provide("reload", reload)
<-- 自行引入 provide nextTick ->

 const handelLanguage = (name) => {
      lang.value = name
      store.commit(Types.SET_LANG, name)
      inject("reload")()
    }

import language, { getLanguage, $t } from "./language"
import "@/styles/elementDefault.scss"
store.commit(Types.SET_LANG, getLanguage())

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"
 });

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")
      },