Vue 3多语言应用开发实战：vue-i18n深度解析与最佳实践

📖 概述

Vue 3 国际化（i18n）是构建多语言应用的核心需求。本文档介绍 Vue 3 中实现国际化的主流方案，包括 vue-i18n、Vite 插件方案和自定义解决方案。

🎯 主流方案对比

方案	优点	缺点	适用场景
vue-i18n	功能完整、生态成熟	包体积较大	大型应用
Vite 插件	轻量、编译时优化	功能相对简单	中小型应用
自定义方案	完全可控、定制化	开发成本高	特殊需求

🚀 方案一：vue-i18n（推荐）

安装配置

npm install vue-i18n@next

基础配置

// src/i18n/index.ts
import { createI18n } from "vue-i18n";

const messages = {
  "zh-CN": {
    message: {
      hello: "你好世界",
      welcome: "欢迎 {name}",
    },
  },
  "en-US": {
    message: {
      hello: "Hello World",
      welcome: "Welcome {name}",
    },
  },
};

const i18n = createI18n({
  legacy: false, // Vue 3 必须设置为 false
  locale: "zh-CN",
  fallbackLocale: "en-US",
  messages,
});

export default i18n;

在组件中使用

<script setup lang="ts">
import { useI18n } from "vue-i18n";

const { t, locale } = useI18n();

// 切换语言
const switchLanguage = (lang: string) => {
  locale.value = lang;
};
</script>

<template>
  <div>
    <h1>{{ t("message.hello") }}</h1>
    <p>{{ t("message.welcome", { name: "Vue" }) }}</p>

    <button @click="switchLanguage('en-US')">English</button>
    <button @click="switchLanguage('zh-CN')">中文</button>
  </div>
</template>

⚡ 方案二：Vite 插件方案

安装配置

npm install @intlify/unplugin-vue-i18n

Vite 配置

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import VueI18n from "@intlify/unplugin-vue-i18n/vite";
import { resolve } from "path";

export default defineConfig({
  plugins: [
    vue(),
    VueI18n({
      include: resolve(__dirname, "./src/locales/**"),
    }),
  ],
});

🎨 方案三：自定义国际化方案

创建国际化工具

// src/utils/i18n.ts
import { ref, computed } from "vue";

interface LocaleMessages {
  [key: string]: any;
}

const currentLocale = ref("zh-CN");
const messages = ref<Record<string, LocaleMessages>>({});

// 加载语言包
export const loadLocale = async (locale: string) => {
  try {
    const module = await import(`../locales/${locale}.json`);
    messages.value[locale] = module.default;
    currentLocale.value = locale;
  } catch (error) {
    console.error(`Failed to load locale: ${locale}`, error);
  }
};

// 翻译函数
export const t = (key: string, params?: Record<string, any>): string => {
  const keys = key.split(".");
  let value = messages.value[currentLocale.value];

  for (const k of keys) {
    value = value?.[k];
  }

  if (!value) return key;

  if (params) {
    return value.replace(/\{(\w+)\}/g, (_, param) => params[param] || "");
  }

  return value;
};

// 组合式函数
export const useI18n = () => {
  const locale = computed(() => currentLocale.value);

  const setLocale = (newLocale: string) => {
    loadLocale(newLocale);
  };

  return {
    t,
    locale,
    setLocale,
  };
};

🔧 高级功能

数字格式化

// 使用 vue-i18n 的数字格式化
const { n } = useI18n();

// 格式化数字
n(1234.56, "currency"); // $1,234.56
n(1234.56, { style: "currency", currency: "CNY" }); // ¥1,234.56

日期格式化

// 使用 vue-i18n 的日期格式化
const { d } = useI18n();

// 格式化日期
d(new Date(), "long"); // 2024年1月15日
d(new Date(), { year: "numeric", month: "long", day: "numeric" });

复数处理

// 复数规则
const messages = {
  "zh-CN": {
    apple: "{count} 个苹果",
  },
  "en-US": {
    apple: "{count} apples",
  },
};

// 使用
t("apple", { count: 5 }); // "5 个苹果"

📱 响应式语言切换

持久化语言设置

// src/composables/useLocale.ts
import { ref, watch } from "vue";

const currentLocale = ref(localStorage.getItem("locale") || "zh-CN");

watch(currentLocale, (newLocale) => {
  localStorage.setItem("locale", newLocale);
  document.documentElement.lang = newLocale;
});

export const useLocale = () => {
  const setLocale = (locale: string) => {
    currentLocale.value = locale;
  };

  return {
    locale: currentLocale,
    setLocale,
  };
};

⚠️ 注意事项

1. 性能优化：大型应用建议使用懒加载语言包
2. SEO 友好：确保服务端渲染时正确处理语言
3. 回退机制：始终提供默认语言作为回退
4. 文化适配：考虑不同地区的日期、数字格式差异

📝 总结

Vue 3 的国际化方案提供了强大的功能，包括多语言支持、日期格式化、复数处理等。通过使用 vue-i18n 插件，开发者可以轻松实现国际化，并确保应用在不同地区和语言环境下都能提供良好的用户体验。同时，通过响应式语言切换和持久化语言设置，可以进一步提升应用的灵活性和用户体验。