Vue3 项目国际化实践

前言

当项目有海外市场的时候，实现多语言切换就很有必要啦

技术选型

业务代码可采用

vue-i18n

框架自带的文本官方一般都有相应的国际化处理😉，常见的语言包基本都具备~

例如：vant

import {Locale} from 'vant'Locale.use('zh-CN', zhCN);

实践

const i18n = createI18n({locale:'cn',fallbackLocale: 'cn',messages: {cn: {message: {hello: 'hello world',},},ja: {message: {hello: 'こんにちは、世界',},},},
})

 

点击切换语言

 

import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const changeLang = () => {if (locale.value == 'cn') {locale.value = 'ja';} else {locale.value = 'cn';}
}

最后

多语言切换就实现啦😁