詳解vue element plus多語言切換
更新時間：2021年12月09日 15:28:43 作者：眼小博
這篇文章主要為大家介紹了vue element plus多語言切換，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
前言
最近接手一個項目，該項目多國家使用，需要支持多語言的切換，在此記錄。
解決一下問題：
- 如何實現(xiàn)多語言切換 ？
- 如何動態(tài)切換語言并更改elementUI語言 ？
- 更改完elementUI組件視圖不更新？
- 如何全局使用 $t 函數(shù) ？
- 如何在js文件里使用vue-i18n ？
如何實現(xiàn)多語言切換 ？
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 函數(shù) 判斷當前l(fā)ocalStorage是否已有選擇過語言如果沒有則獲取當前瀏覽器的語言；
封裝 $t 函數(shù)并導出用在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>
如何動態(tài)切換語言并更改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組件視圖不更新？
這時你會發(fā)現(xiàn)就算我們提交commit去更改elementUI的語言 頁面上也沒有發(fā)生變化，因為視圖組件并沒有更新，如何刷新組件使之重新加載呢？
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 函數(shù) ？ 如何在js文件里使用vue-i18n ？
全局掛在 $t 函數(shù) ，在js文件里直接使用 $t 函數(shù)。
方法一：通過app.config.globalProperties掛在到全局
方法二： 通過provide、inject來實現(xiàn)
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, 需自行引入該函數(shù)
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只在項目第一次進入的時候調用，當切換語言的時候菜單字段不會動態(tài)切換，只有刷新瀏覽器才會改變，如有解決方法希望留言告知?。?！
總結
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!
相關文章
vue列表數(shù)據(jù)刪除后主動刷新頁面及刷新方法詳解
這篇文章主要給大家介紹了關于vue列表數(shù)據(jù)刪除后主動刷新頁面及刷新方法的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
這篇文章主要介紹了Vue package.json配置，package.json是每個前端項目都會有的json文件，位于項目的根目錄中。很多腳手架在創(chuàng)建項目的時候會幫我們自動初始化好 package.json2023-01-01
這篇文章主要介紹了Vue之Mixins(混入)的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
指令是Vue模板中最常用的一項功能，它帶有前綴v-，主要職責是當其表達式的值改變時，相應的將某些行為應用在 DOM 上。這篇文章主要介紹了vue內置指令詳解,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了vue中data數(shù)據(jù)之間如何賦值問題，具有很好的參考價值，希望對大家有所幫助。2022-09-09
今天小編就為大家分享一篇vue實現(xiàn)點擊追加選中樣式效果，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue-router4動態(tài)路由刷新404/白屏的解決
本文主要介紹了vue-router4動態(tài)路由刷新404/白屏的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
我們在本篇內容里給大家整理了關于vue框架安裝的步驟以及需要注意的地方，有需要的朋友們學習下。2019-02-02
這篇文章主要介紹了Vue如何將時間戳轉換日期格式,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
本篇文章主要介紹了VueJs 將接口用webpack代理到本地的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11