当前位置：首页 > news >正文

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

news 2025/8/26 8:00:07

📖 概述

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 必须设置为 falselocale: "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,};
};