"vue": "^3.2.31",
"vue-i18n": "^9.2.0-beta.34",

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { setupI18n } from '@/locales/setupI18n';

const app = createApp(App)

// 使用國際化i18n
app.use(setupI18n)

router.isReady().then(() => app.mount('#app'))

import { App } from 'vue';
import { createI18n } ?from 'vue-i18n'?? ??? ?//引入vue-i18n組件
import { messages } from './config';
import globalConfig from '@/config/index'

let {setting:{lang:defaultLang}} = globalConfig

//注冊i8n實(shí)例并引入語言文件
const localeData = {
? legacy: false, // 使用CompotitionAPI必須添加這條.
? locale: defaultLang,
? messages, // 一個(gè)語言包對象，簡單
? globalInjection: true
?}
?
// setup i18n instance with glob
export const setupI18n = {
? install (app: App) {
? ? const i18n = createI18n(localeData)
? ? app.use(i18n);
? }
}

import zh from './language/zh'
import en from './language/en'

// i18n本地語言包
export const messages = {
? 'zh-CN': zh,
? 'en-US': en
}
-------------------------
// zh文件，en同理
export default {
? menu: {
? ? home: '主頁'
? }
}

<template>
? // select 國際化的一個(gè)下拉框
</template>
<script lang="ts" setup>
import { useI18n } from 'vue-i18n'

const { locale } = useI18n();

const handleChange = (value: Value) => {
?? ?// ...
?? ?// 這句話就是關(guān)鍵
? locale.value = value.value

};

</script>

<template>
?? ?{{t('menu.home')}}
</template>
<script lang ="ts" setup>
?? ?import { useI18n } from 'vue-i18n'
?? ?const { t } = useI18n();
</script>