Vue3 项目国际化实践

$程2025-06-20 20:51

前言

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

技术选型

业务代码可采用

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';
    }
}

最后

多语言切换就实现啦😁