vue3+Ant-design-vue3+i18n實(shí)現(xiàn)多語言切換功能
更新時(shí)間：2026年04月10日 09:20:48 作者：kobe_OKOK_
這篇文章主要為大家詳細(xì)介紹了如何通過vue3+Ant-design-vue3+i18n實(shí)現(xiàn)多語言切換功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下
vue-i18n + Ant Design Vue locale + 本地緩存
這樣：
- 頁面文字切換
- Ant組件語言同步
- 日期組件語言同步
- 表格語言同步
- 分頁語言同步
- 刷新記住語言
這是生產(chǎn)項(xiàng)目標(biāo)準(zhǔn)方案。下面給你完整企業(yè)實(shí)現(xiàn)。
一、安裝依賴
npm install vue-i18n
Vue3：
必須：
npm install vue-i18n@9
二、創(chuàng)建語言目錄
推薦結(jié)構(gòu)：
src/
locales/
zh-cn.js
zh-tw.js
en.js
index.js
三、語言文件
簡體中文
// locales/zh-cn.js
export default {
menu:{
dashboard:"首頁",
factory:"工廠",
device:"設(shè)備",
sensor:"傳感器"
},
button:{
save:"保存",
cancel:"取消"
}
}繁體中文
// locales/zh-tw.js
export default {
menu:{
dashboard:"首頁",
factory:"工廠",
device:"設(shè)備",
sensor:"感測器"
},
button:{
save:"保存",
cancel:"取消"
}
}English
// locales/en.js
export default {
menu:{
dashboard:"Dashboard",
factory:"Factory",
device:"Device",
sensor:"Sensor"
},
button:{
save:"Save",
cancel:"Cancel"
}
}四、創(chuàng)建 i18n 配置
locales/index.js
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五、main.js 注冊
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)
否則：$t 不生效
六、頁面使用
Vue3：
<script setup>
import { useI18n } from 'vue-i18n'
const { t }=useI18n()
</script>
<template>
<div>
{{t('menu.factory')}}
</div>
</template>不要：{{$t()}}
那是Vue2寫法。
七、語言切換實(shí)現(xiàn)
創(chuàng)建：composables/useLang.js
import { useI18n } from 'vue-i18n'
export function useLang(){
const { locale }=useI18n()
const changeLang=(lang)=>{
locale.value=lang
localStorage.setItem(
"lang",
lang
)
}
return{
locale,
changeLang
}
}八、語言切換組件
例如 Header：
<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>九、Ant Design Vue 組件語言同步（重要）
Ant組件不會(huì)自動(dòng)跟隨。
需要：
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'
創(chuàng)建：utils/antdLocale.js
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
}十、App.vue配置
<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>這樣：
Ant：
- Pagination
- Table
- DatePicker
- Modal
- Form
全部同步語言。
十一、企業(yè)推薦優(yōu)化（自動(dòng)檢測瀏覽器）
自動(dòng)選擇：
const lang=
localStorage.getItem("lang")
||
navigator.language
||
"en"轉(zhuǎn)換：
if(lang.includes("zh")){
locale="zh-cn"
}工業(yè)系統(tǒng)常見。
十二、企業(yè)推薦最終結(jié)構(gòu)
推薦：
src/
locales/
en.js
zh-cn.js
zh-tw.js
index.js
composables/
useLang.js
utils/
antdLocale.js
components/
LangSwitch.vue
大型項(xiàng)目必須模塊化。
十三、工業(yè)系統(tǒng)推薦增強(qiáng)（生產(chǎn)級）
真實(shí)項(xiàng)目還會(huì)加：
- 動(dòng)態(tài)加載語言包
- 后端返回語言
- 權(quán)限菜單翻譯
- 表格列翻譯
- API錯(cuò)誤翻譯
- 日期格式翻譯
- moment dayjs同步
- Echarts語言同步
工業(yè)IoT必做：
設(shè)備狀態(tài)：
在線 → Online
離線 → Offline
報(bào)警 → Alarm
統(tǒng)一語言包。
十四、企業(yè)級最終方案（推薦）
生產(chǎn)項(xiàng)目通常：
i18n/
modules/
menu.js
device.js
factory.js
sensor.js
alarm.js
common.js
不是一個(gè)文件。
否則幾萬行
到此這篇關(guān)于vue3+Ant-design-vue3+i18n實(shí)現(xiàn)多語言切換功能的文章就介紹到這了,更多相關(guān)vue3多語言切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
幾乎每個(gè)項(xiàng)目都會(huì)使用登錄頁面,這篇文章主要給大家介紹了如何通過一文教會(huì)你快速上手vue的登錄界面,文中通過實(shí)例代碼介紹的很詳細(xì),需要的朋友可以參考下2022-11-11
關(guān)于Vue.js一些問題和思考學(xué)習(xí)筆記（2）
這篇文章主要為大家分享了關(guān)于Vue.js一些問題和思考的學(xué)習(xí)筆記,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
vue項(xiàng)目兼容ie11的實(shí)現(xiàn)方法
本文主要介紹了vue項(xiàng)目兼容ie11的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue中this.$refs用于訪問通過ref注冊的元素或組件,需在mounted后使用,可在JS操作DOM或調(diào)用子組件方法,注意避免模板中直接使用2025-08-08
這篇文章主要介紹了Vue中的 v-model組件封裝(類似彈窗組件),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
在vue中獲取微信支付code及code被占用問題的解決方法
這篇文章主要介紹了在vue中獲取微信支付code及code被占用問題的解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
Vue3項(xiàng)目常用Pinia管理狀態(tài),通過安裝和配置實(shí)現(xiàn)數(shù)據(jù)持久化,這篇文章主要介紹了vue3基礎(chǔ)教程之pinia配置和用法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-06-06
vue開發(fā)中如何在js文件里使用pinia和組件同步
在JavaScript文件中封裝涉及到使用Pinia的方法時(shí),發(fā)現(xiàn)Pinia和組件內(nèi)容并不同步,二者的狀態(tài)是獨(dú)立的,解決辦法是,在新建對象的時(shí)候,將Pinia作為參數(shù)傳入,本文給大家介紹vue開發(fā)中如何在js文件里使用pinia和組件同步,感興趣的朋友一起看看吧2024-10-10
使用VUE+iView+.Net Core上傳圖片的方法示例
這篇文章主要介紹了使用VUE+iView+.Net Core上傳圖片的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了elementUi 中table表尾插入行的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07