vue3多语言实现

vue3多语言实现方法

使用vue-i18n插件

安装vue-i18n依赖包：

npm install vue-i18n@9

创建语言资源文件：

// src/locales/en.js
export default {
  message: {
    hello: 'Hello world'
  }
}

// src/locales/zh.js
export default {
  message: {
    hello: '你好世界'
  }
}

配置i18n实例：

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

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

在main.js中挂载：

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

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

模板中使用：

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

动态切换语言

添加语言切换方法：

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

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

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

    return { changeLanguage }
  }
}

组合式API使用

在setup中使用：

import { useI18n } from 'vue-i18n'

export default {
  setup() {
    const { t } = useI18n()
    return { t }
  }
}

按需加载语言包

实现懒加载语言资源：

const loadLocaleMessages = async (locale) => {
  const messages = await import(`./locales/${locale}.js`)
  i18n.global.setLocaleMessage(locale, messages.default)
}

浏览器语言自动检测

检测用户浏览器语言：

const navigatorLang = navigator.language.split('-')[0]
if (['zh', 'en'].includes(navigatorLang)) {
  i18n.global.locale = navigatorLang
}

数字和日期本地化

配置日期时间格式：

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>

自定义复数规则

配置复数规则：

const i18n = createI18n({
  pluralizationRules: {
    ru: (choice, choicesLength) => {
      // 俄语复数规则
    }
  }
})

语言持久化

使用localStorage保存语言选择：

const savedLocale = localStorage.getItem('locale')
if (savedLocale) {
  i18n.global.locale = savedLocale
}

// 切换语言时
localStorage.setItem('locale', newLocale)

服务端渲染(SSR)支持

在SSR环境中使用：

export default function (ssrContext) {
  const locale = ssrContext.locale || 'en'
  return createI18n({
    locale,
    messages: {
      [locale]: require(`./locales/${locale}.json`)
    }
  })
}

单元测试支持

测试环境中配置：

import { createI18n } from 'vue-i18n'
import { config } from '@vue/test-utils'

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

config.global.plugins = [i18n]