Vue 国际化（i18n）方案，你真的全球化了吗？-CFANZ编程社区

哈喽，各位小伙伴，欢迎来到我是wangfang呀的博客！我是我是wangfang呀，虽然还在编程的“菜鸟”阶段，但我已经迫不及待地想和大家分享我一路上踩过的坑和学到的小技巧。如果你也曾为bug头疼，那么你来对地方了！今天的内容希望能够给大家带来一些灵感和帮助。

前言

“多语言”听着高大上，其实就是把“中文一套、英文一套、日语一套”切换自如。可项目做起来，配置、加载、上下文、格式化……没点经验，保证你弄得头大！本文带你用 vue-i18n 打造“说得了中文、唱得了英文、唱得了方言”的国际化应用。

1. 快速上手：`vue-i18n` 插件使用

1.1 安装与注册

npm install vue-i18n@next --save
# 或
yarn add vue-i18n@next

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { createI18n } from 'vue-i18n'

// 1. 准备多语言资源
const messages = {
  en: { welcome: 'Welcome, {name}!' },
  zh: { welcome: '欢迎，{name}！' },
}

// 2. 创建 i18n 实例
const i18n = createI18n({
  legacy: false,         // Composition API 模式
  locale: 'zh',          // 默认语言
  fallbackLocale: 'en',  // 兜底语言
  messages,
})

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

1.2 在组件中使用

<template>
  <div>
    <!-- 插值 + 参数 -->
    <p>{{ t('welcome', { name: username }) }}</p>
    <!-- 组件指令 -->
    <p v-t="'welcome'" :name="username"></p>
  </div>
</template>
<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const username = 'Alice'
</script>

2. 动态切换语言与本地化资源管理

2.1 切换语言

<template>
  <select v-model="lang" @change="switchLang">
    <option value="zh">中文</option>
    <option value="en">English</option>
  </select>
</template>
<script setup>
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const lang = ref(locale.value)

function switchLang() {
  locale.value = lang.value
}
</script>

2.2 语言包分文件管理

src/locales/
├── en.json
├── zh.json
└── ja.json

// main.js
import en from './locales/en.json'
import zh from './locales/zh.json'

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

3. 多语言内容组织与懒加载

3.1 按需加载语言包

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

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

export async function loadLocale(locale) {
  if (!i18n.global.availableLocales.includes(locale)) {
    const msgs = await import(`./locales/${locale}.json`)
    i18n.global.setLocaleMessage(locale, msgs.default)
  }
  i18n.global.locale.value = locale
}

export default i18n

<script setup>
import { loadLocale } from './i18n'
const lang = ref('zh')
watch(lang, (v) => loadLocale(v))
</script>

3.2 组件级语言包

在单文件组件中用 <i18n> 块（需 vue-cli-plugin-i18n 或 Vite 插件支持）。

<i18n>
{
  "en": { "title": "Hello" },
  "zh": { "title": "你好" }
}
</i18n>

<template>{{ t('title') }}</template>

4. 复杂场景下的国际化设计

4.1 消息格式化与复数形式

const messages = {
  en: {
    cart: 'You have {count} {count, plural, =0 {items} =1 {item} other {items}}'
  },
  zh: { cart: '您有 {count} 件商品' },
}

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

4.2 日期、数字本地化

// 使用 Intl API
const { d, n } = useI18n({ numberFormats, datetimeFormats })
<n :value="12345.67" />      <!-- 本地化数字 -->
<d :value="new Date()" />    <!-- 本地化日期 -->

在创建 i18n 时传入 numberFormats、datetimeFormats。