快捷導(dǎo)航

在vue3項目中實現(xiàn)國際化的代碼示例

更新時間：2023年07月14日 11:54:45 作者：前端隨想

國際化就是指在一個項目中，項目中的語言可以進(jìn)行切換（中英文切換），那么在實際項目中是如何實現(xiàn)的呢，本文就給大家詳細(xì)的介紹實現(xiàn)方法,需要的朋友可以參考下

首先我們進(jìn)行一下最終效果的展示：

了解國際化的實現(xiàn)思路????

首先在正式的實現(xiàn)國際化之前，我們不妨先來了解一下實現(xiàn)國際化的思路：

//定義msg值的數(shù)據(jù)源
const messages={
 ? en:{
 ? msg:"hello world"
 }
 ?zh:{
 ? msg:"你好世界"
 }
}
//定義切換變量
let locale="en";
//3.定義賦值函數(shù)
function t(key){
 ? ?return messages[locale][key]
}

講解一些國際化的實現(xiàn)方式，其實就是定義了一個對象，然后在這個對象中包含兩種（當(dāng)然也可以是多種）語言，比如在這里這個messages對象中就包含兩個對象分別文en和zh，這兩個對象中都有同一個屬性msg，zh中對應(yīng)的是中文，而en對應(yīng)的就是英文，

我們在初始的時候定義一個locale變量，并且指定變量值為"en"，同時我們還定義了一個函數(shù)，這個函數(shù)接收一個key值，我們可以理解為這個key是想要獲取的gu國際化處理的變量值，比如在這個例子里面這個key就代表著 ”msg“,這樣我們只需要修改locale的值就可以獲取不同語言下的msg的值了，這就實現(xiàn)了國際化

在項目開發(fā)中使用國際化??‍♀???‍♀?

初始化配置

在了解了國際化的原理之后，其實實現(xiàn)國際化的原理并不復(fù)雜，那么我們在實際項目中是如何做的呢？

在開發(fā)過程中，一般我們需要借助第三方的包來實現(xiàn)。

首先安裝指定的包

npm i vue-i18n@next

對于國際化我們實現(xiàn)分為一下幾個步驟：

創(chuàng)建一個組件用于修改locale
配置修改element-plus的語言包
創(chuàng)建并導(dǎo)入自定義的語言包

在安裝指定的包之后我在實際項目中是這樣處理的：

首先在src文件下面創(chuàng)建一個i18n文件夾專門用來處理國際化的問題
然后在里面新建index.js文件
并且建立一個文件夾名稱為lang，專門用來存放自定義的語言包

import { createI18n } from "vue-i18n";
//這是我自己創(chuàng)建的語言包
import mZhLocale from "./lang/zh";
import mEnLocale from "./lang/en";
//這里使用了vuex來進(jìn)行全局的數(shù)據(jù)共享
import store from "@/store";
//創(chuàng)建messages對象，里面注冊相應(yīng)的語言包，這里面我注冊了自己定義的語言包
const messages = {
 ?en: {
 ? ?...mEnLocale,
  },
 ?zh: {
 ? ?...mZhLocale,
  },
};
// 進(jìn)行持久化處理，防止在頁面刷新之后數(shù)據(jù)丟失
const getLanguage = () => {
 ?return store && store.getters && store.getters.language;
};
const i18n = createI18n({
 ?legacy: false, // 使用composition API
 ?locale: getLanguage(),//初始的時候調(diào)用這個函數(shù)獲取vuex中的數(shù)據(jù)，當(dāng)然vuex初始數(shù)據(jù)調(diào)用localstorage中存儲的數(shù)據(jù)，或者默認(rèn)賦值為”zh“
 ?globalInjection: true, ?// 表明使用全局t函數(shù)
 ?messages,
});
export default i18n;//將i18函數(shù)導(dǎo)出

我們在index.js中進(jìn)行i18函數(shù)的創(chuàng)建和導(dǎo)出，注冊使用了自己定義的語言包，我們導(dǎo)出之后還需要在main.js中進(jìn)行注冊使用

main.js中

import App from "./App.vue";
import i18n from "@/i18n/index";
const app = createApp(App);
app.use(i18n);

在進(jìn)行注冊完之后我們還要在項目中對要展示的文字的部分進(jìn)行如下的修改,因此我們要使用$t函數(shù)

在項目中使用

其中的navBar.home則是在語言包中定義的數(shù)據(jù) 例如在英語語言包中：

export default{
 navBar:{
 ? home:"Home"
 }
}

在中文語言包中就會有一個對應(yīng)的中文數(shù)據(jù)

export default{
 navBar:{
 ? home:"主頁"
 }
}

這里只是做一個實例。

<span>{{ $t("navBar.home") }}</span>

這t函數(shù)的第一種使用方式,我們當(dāng)然還會遇到其他的情況。

就比如說是在登錄注冊頁面中的輸入框我們也想要使用t函數(shù)來進(jìn)行國際化的處理：

 <el-input :placeholder="$t('login.inputName')"></el-input>

沒有發(fā)生太大的變化，只是要注意一下，當(dāng)然我們有的時候可能需要封裝一個函數(shù)，然后在函數(shù)中我們封裝了國際化的相關(guān)需求，這個時候如何做呢？

其實也不復(fù)雜，比如我們封裝了一個函數(shù)用來處理sideBarItem中的標(biāo)題。

import i18n from "@/i18n";
// 根據(jù)這個函數(shù)來處理面包屑和sidebar
export const generateTitle = (title) => {
 ?return i18n.global.t("route." + title);
};

這里面我們導(dǎo)入了之前創(chuàng)建的I18n文件夾下面的idnex.js文件，注意最后我們在函數(shù)返回值上面通過i18n.global.t()來將相應(yīng)的值返回。

element-plus組件中的國際化處理????

在上面的說明中我們只是配置了自定義的語言包處理，那么我們?nèi)绾翁幚韊lement-plus中的組件的國際化處理呢？

在element-plus的給出的方案中，我們一般這么處理：

在APP.vue中使用el-config-provider組件將router-view標(biāo)簽包裹
其次我們需要給locale定義值，這里我們同樣還是使用vuex中的共享數(shù)據(jù)來進(jìn)行定義，判斷vuex中的存儲的值，如果是zh的化就配置中文語言包，否則就是英文語言包。
我們需要導(dǎo)入element-plus自帶的語言包來進(jìn)行相應(yīng)的處理。

<template>
 ?<el-config-provider :locale="$store.getters.language === 'zh' ? ZhCn : En">
 ? ?<router-view></router-view>
 ?</el-config-provider>
</template>
<script setup>
import En from "element-plus/lib/locale/lang/en";
import ZhCn from "element-plus/lib/locale/lang/zh-cn";
</script>

這樣當(dāng)我們vuex中的數(shù)據(jù)發(fā)生變化的時候，element-plus中的語言也會發(fā)生相應(yīng)的變化。

封裝語言切換組件

當(dāng)然為了切換語言我封裝了一個組件LangSelect：

<template>
 ?<div>
 ? ?<el-dropdown trigger="click" @command="handleSetLanguage">
 ? ? ?<div>
 ? ? ? ?<el-tooltip content="國際化">
 ? ? ? ? ?<div><svg-icon icon="language"></svg-icon></div>
 ? ? ? ?</el-tooltip>
 ? ? ?</div>
 ? ? ?<template #dropdown>
 ? ? ? ?<el-dropdown-menu>
 ? ? ? ? ?<el-dropdown-item command="zh" :disabled="language === 'zh'"
 ? ? ? ? ? ?>中文</el-dropdown-item
 ? ? ? ? ?>
 ? ? ? ? ?<el-dropdown-item command="en" :disabled="language === 'en'"
 ? ? ? ? ? ?>English</el-dropdown-item
 ? ? ? ? ?>
 ? ? ? ?</el-dropdown-menu>
 ? ? ?</template>
 ? ?</el-dropdown>
 ?</div>
</template>

<script setup>
import { computed } from "vue";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";
const store = useStore();
// 實例化i18
const i18 = useI18n();
const language = computed(() => store.getters.language);
// 進(jìn)行語言切換
const handleSetLanguage = (lang) => { ? ?
 ?i18.locale.value = lang;
 ?store.commit("app/setLanguage", lang);
 ?ElMessage.success("更新完成");
 ?console.log(lang);
};
</script>

注意這里我們使用了useI18n這個函數(shù)來進(jìn)行實例化，然后我們定義了一個函數(shù)handleSetLanguage，用來切換語言,

在函數(shù)內(nèi)部，通過修改i18.locale.value的值來更新當(dāng)前語言。
然后調(diào)用store.commit方法來觸發(fā)名為"setLanguage"的Vuex mutation，更新store中的語言狀態(tài)。
使用computed函數(shù)創(chuàng)建名為language的計算屬性,language屬性依賴于store.getters.language，即從Vuex store的language`的getters中獲取當(dāng)前語言。

vuex中的數(shù)據(jù)

export default {
state: {
 ? ?// 獲取緩存中的顯示文字類型，如果為空默認(rèn)為中文
 ? ?language: getItem(LANG) || "zh",
  },
 ? ?mutations: {
 ? ?//通過這個方法來修改vuex中的數(shù)據(jù)
 ? ?setLanguage(state, lang) {
 ? ? ?// 給緩存中添加數(shù)據(jù)
 ? ? ?setItem(LANG, lang);
 ? ? ?state.language = lang;
 ?  },
  },
  }

到此這篇關(guān)于在vue3項目中實現(xiàn)國際化的代碼示例的文章就介紹到這了,更多相關(guān)vue3項目國際化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: