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

npm i vue-i18n@next

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

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

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

export default{
 navBar:{
 ? home:"主頁(yè)"
 }
}

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

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

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

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

<template>
 ?<div>
 ? ?<el-dropdown trigger="click" @command="handleSetLanguage">
 ? ? ?<div>
 ? ? ? ?<el-tooltip content="國(guó)際化">
 ? ? ? ? ?<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();
// 實(shí)例化i18
const i18 = useI18n();
const language = computed(() => store.getters.language);
// 進(jìn)行語(yǔ)言切換
const handleSetLanguage = (lang) => { ? ?
 ?i18.locale.value = lang;
 ?store.commit("app/setLanguage", lang);
 ?ElMessage.success("更新完成");
 ?console.log(lang);
};
</script>

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