首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3多语言切换

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

2026-04-10 09:13:31 作者：kobe_OKOK_

这篇文章主要为大家详细介绍了如何通过vue3+Ant-design-vue3+i18n实现多语言切换功能,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下

vue-i18n + Ant Design Vue locale + 本地缓存

这样：

页面文字切换
Ant组件语言同步
日期组件语言同步
表格语言同步
分页语言同步
刷新记住语言

这是生产项目标准方案。下面给你完整企业实现。

一、安装依赖

npm install vue-i18n

Vue3：

必须：

npm install vue-i18n@9

二、创建语言目录

推荐结构：

src/
locales/
zh-cn.js
zh-tw.js
en.js
index.js

三、语言文件

简体中文

// 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:"取消"
}
}

English

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

四、创建 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写法。

七、语言切换实现

创建：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组件不会自动跟随。

需要：

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'

创建：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

全部同步语言。

十一、企业推荐优化（自动检测浏览器）

自动选择：

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

转换：

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

工业系统常见。

十二、企业推荐最终结构

十三、工业系统推荐增强（生产级）

真实项目还会加：

动态加载语言包
后端返回语言
权限菜单翻译
表格列翻译
API错误翻译
日期格式翻译
moment dayjs同步
Echarts语言同步

工业IoT必做：

设备状态：

在线 → Online
离线 → Offline
报警 → Alarm

统一语言包。

十四、企业级最终方案（推荐）

生产项目通常：

i18n/

modules/

menu.js
device.js
factory.js
sensor.js
alarm.js
common.js

不是一个文件。

否则几万行

到此这篇关于vue3+Ant-design-vue3+i18n实现多语言切换功能的文章就介绍到这了,更多相关vue3多语言切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！