在i18n下创建 en.ts  zh.ts  index.ts 分别写入下面代码

en.ts/js

//en
export default {message: {login: login}
}

zh.ts

//zh
export default {message: {login: '登录'}
}

index.ts

//index.ts
import { createI18n } from "vue-i18n";
import en from './en'
import zh from './zh';const i18n = createI18n({locale:localStorage.getItem('language') || 'zh', // 默认是中文
//   fallbackLocale: 'en', // 语言切换的时候是英文globalInjection:true,//全局配置$tlegacy:false,//vue3写法messages:{en,zh}// 需要做国际化的语种,就是刚才编写的两个语言})export default i18n

二.在main.ts进行引入   注意看路径

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
import i18n from './i18n/index' //引入配置的语言const app = createApp(App)
app.use(router)
app.use(i18n)    //挂载
app.mount('#app')

三、解决切换语言不刷新的问题

vue-i18n提供了一个钩子函数 useI18n(),暴露出locale属性用于切换语言

import { useI18n } from 'vue-i18n'
const { locale } = useI18n()locale.value = 'en' // 要切换的语言