Vue应用国际化(i18n)的核心方案与实践技巧

npm install vue-i18n

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const messages = {
  en: {
    welcome: 'Welcome',
    greeting: 'Hello, {name}!'
  },
  zh: {
    welcome: '欢迎',
    greeting: '你好，{name}！'
  }
}

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

new Vue({
  i18n,
  // ...其他选项
}).$mount('#app')

src/
  lang/
    index.js        # 入口文件
    locales/
      en.json       # 英文翻译
      zh-CN.json    # 中文翻译
      ja.json       # 日文翻译

async function loadLocaleMessages(i18n, locale) {
  const messages = await import(`@/lang/locales/${locale}.json`)
  i18n.setLocaleMessage(locale, messages.default)
  return nextTick()
}

const messages = {
  en: {
    apple: 'apple | apples',
    banana: 'no bananas | one banana | {count} bananas'
  }
}

// 模板中使用
<p>{{ $tc('apple', appleCount) }}</p>
<p>{{ $tc('banana', bananaCount, { count: bananaCount }) }}</p>

// 配置日期时间格式
const dateTimeFormats = {
  en: {
    short: {
      year: 'numeric', month: 'short', day: 'numeric'
    }
  },
  ja: {
    long: {
      year: 'numeric', month: 'long', day: 'numeric',
      weekday: 'long', hour: 'numeric', minute: 'numeric'
    }
  }
}

// 使用
<p>{{ $d(new Date(), 'long') }}</p>

<template>
  <div>
    <h1>{{ $t('page.title') }}</h1>
    <p>{{ $t('page.description') }}</p>
  </div>
</template>

<i18n>
{
  "en": {
    "page": {
      "title": "Component Title",
      "description": "This is a component description"
    }
  },
  "zh": {
    "page": {
      "title": "组件标题",
      "description": "这是组件描述"
    }
  }
}
</i18n>

<template>
  <div class="language-switcher">
    <button 
      v-for="lang in availableLocales"
      :key="lang"
      @click="changeLanguage(lang)"
      :class="{ active: lang === locale }"
    >
      {{ $t(`language.${lang}`) }}
    </button>
  </div>
</template>

<script>
export default {
  computed: {
    availableLocales() {
      return this.$i18n.availableLocales
    },
    locale() {
      return this.$i18n.locale
    }
  },
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang
      localStorage.setItem('user-lang', lang)
    }
  }
}
</script>

// 验证规则
const rules = {
  required: value => !!value || i18n.t('validation.required'),
  email: value => {
    const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    return pattern.test(value) || i18n.t('validation.email')
  }
}

// 对应的翻译文件
{
  "validation": {
    "required": "This field is required",
    "email": "Please enter a valid email address"
  }
}