vue3多语言实现

Vue 3 多语言实现方法

使用 vue-i18n 插件

Vue 3 中推荐使用 vue-i18n@next（v9.x）实现多语言。安装依赖：

npm install vue-i18n@next

初始化 i18n 实例：

// src/i18n.js
import { createI18n } from 'vue-i18n'

const messages = {
  en: {
    greeting: 'Hello!',
    button: { save: 'Save' }
  },
  zh: {
    greeting: '你好！',
    button: { save: '保存' }
  }
}

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

export default i18n

在 main.js 中引入：

import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n'

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

模板中使用翻译

通过 $t 方法或 <i18n-t> 组件：

<template>
  <p>{{ $t('greeting') }}</p>
  <button>{{ $t('button.save') }}</button>

  <i18n-t keypath="greeting" tag="p"/>
</template>

动态切换语言

调用 i18n.global.locale 属性：

// 在组件中
import { useI18n } from 'vue-i18n'

export default {
  setup() {
    const { locale } = useI18n()
    const changeLanguage = (lang) => {
      locale.value = lang
    }
    return { changeLanguage }
  }
}

按需加载语言包

对于大型项目，可以动态加载语言文件：

// 异步加载语言包
async function loadLocaleMessages(locale) {
  const messages = await import(`./locales/${locale}.json`)
  i18n.global.setLocaleMessage(locale, messages.default)
}

处理复数与变量插值

在语言文件中定义带变量的消息：

{
  "cart": "You have {count} item in your cart | You have {count} items in your cart"
}

模板中使用：

<p>{{ $tc('cart', itemCount, { count: itemCount }) }}</p>

日期与数字本地化

使用 vue-i18n 的扩展功能：

const datetimeFormats = {
  en: {
    short: {
      year: 'numeric', month: 'short', day: 'numeric'
    }
  }
}

const i18n = createI18n({
  datetimeFormats,
  // ...其他配置
})

模板中使用：

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

最佳实践

• 将语言文件按模块拆分（如 login.json, dashboard.json）
• 为常用词汇创建共享词汇表
• 在路由切换时预加载所需语言包
• 使用 TypeScript 定义语言类型保证类型安全

替代方案

对于简单需求，可使用自定义实现：

// 自定义多语言方案
const translations = {
  en: { /* ... */ },
  zh: { /* ... */ }
}

export const useTranslate = () => {
  const currentLang = ref('en')
  const t = (key) => translations[currentLang.value][key] || key
  return { t, currentLang }
}