过程

安装依赖，配置，当点击中英文切换按钮时候，全局变换，element-plus组件也需要中英文切换。
确定初始化的语言在setting中，页面加载会读取里面的语言走一次语言的初始化配置，后面就是按钮切换

代码

仅供参考
安装

 "vue-i18n": "^9.10.1",

main.js

import i18n from '@/lang/index' // 国际化
app.use(i18n) //中英切换

src下新建文件夹lang，再新建package文件夹同级别index.js

import { createI18n } from 'vue-i18n'
import Elp_ZhCn from 'element-plus/dist/locale/zh-cn.mjs'
import Elp_en from 'element-plus/dist/locale/en.mjs'// 本地语言包
import enLocale from './package/en.json'
import zhCnLocale from './package/zh-cn.json'const messages = {// 'zh-cn': {//   ...zhCnLocale// },zh: {...zhCnLocale,...Elp_ZhCn,},en: {...enLocale,...Elp_en,},
}const i18n = createI18n({legacy: false,locale: window.localStorage.getItem('language') || 'zh',messages: messages,
})export default i18n

package下的en.json和zh-cn.json，类似下面

  "days": "天","days": "days",

一开始确认默认的语言.main.js中配置ep的

<template><el-config-provider :locale="appStore.locale" :size="appStore.size"><router-view /></el-config-provider>
</template>
<script setup>
import { ElConfigProvider } from 'element-plus'
import { useAppStore } from '@/store/modules/app.js'
const appStore = useAppStore()console.log('ep的语言为：', appStore.locale.name)
</script>

走小仓库app.js

import { defineStore } from 'pinia'
import { useStorage } from '@vueuse/core'
import defaultSettings from '@/setting'// 导入 Element Plus 中英文语言包
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en'// setup
export const useAppStore = defineStore('app', () => {// stateconst device = useStorage('device', 'desktop')const size = useStorage('size', defaultSettings.size)console.log('🚀初始化的 ~ useAppStore ~ defaultSettings.language:', defaultSettings.language)const language = useStorage('language', defaultSettings.language)console.log('🚀初始化的 ~ useAppStore ~ language:', language)const sidebarStatus = useStorage('sidebarStatus', 'closed')const sidebar = reactive({opened: sidebarStatus.value !== 'closed',withoutAnimation: false,})// const documentTitle = useStorage('documentTitle', defaultSettings.title);document.title = defaultSettings.titleconst activeTopMenu = useStorage('activeTop', '')/*** 根据语言标识读取对应的语言包*/const locale = computed(() => {if (language?.value == 'en') {return en} else {return zhCn}})// actionsfunction toggleSidebar() {sidebar.opened = !sidebar.openedsidebar.withoutAnimation = falseif (sidebar.opened) {sidebarStatus.value = 'opened'} else {sidebarStatus.value = 'closed'}}function closeSideBar(withoutAnimation) {sidebar.opened = falsesidebar.withoutAnimation = withoutAnimationsidebarStatus.value = 'closed'}function openSideBar(withoutAnimation) {sidebar.opened = truesidebar.withoutAnimation = withoutAnimationsidebarStatus.value = 'opened'}function toggleDevice(val) {device.value = val}function changeSize(val) {size.value = val}/*** 切换语言** @param val*/function changeLanguage(val) {language.value = val}/*** 混合模式顶部切换*/function changeTopActive(val) {activeTopMenu.value = val}return {device,sidebar,language,locale,size,activeTopMenu,toggleDevice,changeSize,changeLanguage,toggleSidebar,closeSideBar,openSideBar,changeTopActive,}
})

其中setting是自定义的配置

// import logo from '@/assets/images/error_images/401.png' // 使用相对路径导入图片
//用于项目logo|标题配置
export default {title: 'Lucky_Star', //项目的标题logo: '/logo.svg', //项目public下的// logo: logo, //项目logo设置logoHidden: true, //logo组件是否隐藏设置language: 'zh', // zh| enfixedHeader: true,tagsView: false,sidebarLogo: true,
}

按钮切换

import i18n from '@/lang'import { useAppStore } from '@/store/modules/app.js'
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const appStore = useAppStore()const changeLanZ = () => {console.log('切为中文')locale.value = 'zh'i18n.global.locale.value = 'zh'appStore.changeLanguage('zh')
}const changeLanE = () => {locale.value = 'en'console.log('切为英文')i18n.global.locale.value = 'en'appStore.changeLanguage('en')
}