vue3+Ant-design-vue3+i18n实现多语言切换功能

npm install vue-i18n

npm install vue-i18n@9

// locales/zh-cn.js
export default {
menu:{
dashboard:"首页",
factory:"工厂",
device:"设备",
sensor:"传感器"
},
button:{
save:"保存",
cancel:"取消"
}
}

// locales/zh-tw.js
export default {
menu:{
dashboard:"首頁",
factory:"工廠",
device:"設備",
sensor:"感測器"
},
button:{
save:"保存",
cancel:"取消"
}
}

// locales/en.js
export default {
menu:{
dashboard:"Dashboard",
factory:"Factory",
device:"Device",
sensor:"Sensor"
},
button:{
save:"Save",
cancel:"Cancel"
}
}

import { createI18n } from 'vue-i18n'
import zhCN from './zh-cn'
import zhTW from './zh-tw'
import en from './en'
const i18n=createI18n({
legacy:false,
locale:
localStorage.getItem("lang")
||"zh-cn",
fallbackLocale:"en",
messages:{
"zh-cn":zhCN,
"zh-tw":zhTW,
"en":en
}
})
export default i18n

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import i18n from './locales'
createApp(App)
.use(router)
.use(i18n)
.mount('#app')

.use(i18n)

<script setup>
import { useI18n } from 'vue-i18n'
const { t }=useI18n()
</script>
<template>
<div>
{{t('menu.factory')}}
</div>
</template>

import { useI18n } from 'vue-i18n'
export function useLang(){
const { locale }=useI18n()
const changeLang=(lang)=>{
locale.value=lang
localStorage.setItem(
"lang",
lang
)
}
return{
locale,
changeLang
}
}

<script setup>
import { useLang } from '@/composables/useLang'
const {
locale,
changeLang
}=useLang()
</script>
<template>
<a-select
style="width:120px"
:value="locale"
@change="changeLang"
>
<a-select-option value="zh-cn">
简体中文
</a-select-option>
<a-select-option value="zh-tw">
繁體中文
</a-select-option>
<a-select-option value="en">
English
</a-select-option>
</a-select>
</template>

import zhCN from 'ant-design-vue/es/locale/zh_CN'
import zhTW from 'ant-design-vue/es/locale/zh_TW'
import enUS from 'ant-design-vue/es/locale/en_US'

import zhCN from 'ant-design-vue/es/locale/zh_CN'
import zhTW from 'ant-design-vue/es/locale/zh_TW'
import enUS from 'ant-design-vue/es/locale/en_US'
export function getAntLocale(lang){
if(lang==="zh-cn"){
return zhCN
}
if(lang==="zh-tw"){
return zhTW
}
return enUS
}

<script setup>
import { useLang } from './composables/useLang'
import { getAntLocale } from './utils/antdLocale'
const { locale }=useLang()
</script>
<template>
<a-config-provider
:locale="getAntLocale(locale)"
>
<router-view/>
</a-config-provider>
</template>

const lang=
localStorage.getItem("lang")
||
navigator.language
||
"en"

if(lang.includes("zh")){
locale="zh-cn"
}