vue3多语言实现

vue3 多语言实现方案

使用 vue-i18n 插件

安装 vue-i18n 依赖包：

npm install vue-i18n@9

创建语言资源文件（如 locales/en.json 和 locales/zh.json）：

{
  "message": {
    "hello": "Hello world!",
    "welcome": "Welcome to Vue 3"
  }
}

初始化 i18n 实例并挂载到 Vue 应用：

import { createI18n } from 'vue-i18n'
import en from './locales/en.json'
import zh from './locales/zh.json'

const i18n = createI18n({
  locale: 'en', // 默认语言
  fallbackLocale: 'en', // 回退语言
  messages: {
    en,
    zh
  }
})

const app = createApp(App)
app.use(i18n)
app.mount('#app')

在组件中使用多语言

模板中使用 $t 方法：

<p>{{ $t('message.hello') }}</p>

脚本中使用：

import { useI18n } from 'vue-i18n'

export default {
  setup() {
    const { t } = useI18n()
    console.log(t('message.welcome'))
  }
}

切换语言功能

添加语言切换按钮：

<button @click="changeLanguage('en')">English</button>
<button @click="changeLanguage('zh')">中文</button>

实现切换方法：

import { useI18n } from 'vue-i18n'

export default {
  setup() {
    const { locale } = useI18n()

    const changeLanguage = (lang) => {
      locale.value = lang
    }

    return { changeLanguage }
  }
}

动态加载语言包

对于大型项目，可以按需加载语言包：

const loadLocaleMessages = async (locale) => {
  const response = await fetch(`./locales/${locale}.json`)
  return response.json()
}

const i18n = createI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {}
})

// 切换语言时加载
const changeLanguage = async (lang) => {
  if (!i18n.global.availableLocales.includes(lang)) {
    const messages = await loadLocaleMessages(lang)
    i18n.global.setLocaleMessage(lang, messages)
  }
  i18n.global.locale.value = lang
}

处理复数形式和变量插值

语言资源文件中定义复数规则：

{
  "apple": {
    "one": "one apple",
    "other": "{count} apples"
  }
}

模板中使用：

<p>{{ $tc('apple', appleCount) }}</p>

带变量的插值：

{
  "greeting": "Hello, {name}!"
}

<p>{{ $t('greeting', { name: userName }) }}</p>

日期和数字本地化

配置日期时间格式：

const i18n = createI18n({
  datetimeFormats: {
    en: {
      short: {
        year: 'numeric',
        month: 'short',
        day: 'numeric'
      }
    },
    zh: {
      short: {
        year: 'numeric',
        month: 'short',
        day: 'numeric'
      }
    }
  }
})

模板中使用：

<p>{{ $d(new Date(), 'short') }}</p>