vue3+Ant-design-vue3+i18n多语种切换

text 复制代码

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

这样：

✔ 页面文字切换

✔ Ant组件语言同步

✔ 日期组件语言同步

✔ 表格语言同步

✔ 分页语言同步

✔ 刷新记住语言

这是生产项目标准方案。

下面给你完整企业实现。

一、安装依赖

bash 复制代码

npm install vue-i18n

Vue3：

必须：

bash 复制代码

npm install vue-i18n@9

二、创建语言目录

推荐结构：

text 复制代码

src/

locales/

zh-cn.js
zh-tw.js
en.js
index.js

三、语言文件

简体中文

javascript 复制代码

// locales/zh-cn.js

export default {

menu:{

dashboard:"首页",

factory:"工厂",

device:"设备",

sensor:"传感器"

},

button:{

save:"保存",

cancel:"取消"

}

}

繁体中文

javascript 复制代码

// locales/zh-tw.js

export default {

menu:{

dashboard:"首頁",

factory:"工廠",

device:"設備",

sensor:"感測器"

},

button:{

save:"保存",

cancel:"取消"

}

}

English

javascript 复制代码

// locales/en.js

export default {

menu:{

dashboard:"Dashboard",

factory:"Factory",

device:"Device",

sensor:"Sensor"

},

button:{

save:"Save",

cancel:"Cancel"

}

}

四、创建 i18n 配置

locales/index.js

javascript 复制代码

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 注册

javascript 复制代码

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')

必须：

javascript 复制代码

.use(i18n)

否则：

$t 不生效。

六、页面使用

Vue3：

vue 复制代码

<script setup>

import { useI18n } from 'vue-i18n'

const { t }=useI18n()

</script>


<template>

<div>

{{t('menu.factory')}}

</div>

</template>

不要：

vue 复制代码

{{$t()}}

那是Vue2写法。

七、语言切换实现

创建：

composables/useLang.js

javascript 复制代码

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：

vue 复制代码

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

需要：

javascript 复制代码

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

javascript 复制代码

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配置

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

全部同步语言。

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

自动选择：

javascript 复制代码

const lang=

localStorage.getItem("lang")

||

navigator.language

||

"en"

转换：

javascript 复制代码

if(lang.includes("zh")){

locale="zh-cn"

}

工业系统常见。

十二、企业推荐最终结构

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

真实项目还会加：

✔ 动态加载语言包

✔ 后端返回语言

✔ 权限菜单翻译

✔ 表格列翻译

✔ API错误翻译

✔ 日期格式翻译

✔ moment dayjs同步

✔ Echarts语言同步

工业IoT必做：

设备状态：

text 复制代码

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

统一语言包。

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

生产项目通常：

text 复制代码

i18n/

modules/

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

不是一个文件。

否则：

几万行。