重生之我在学Vue–第14天 Vue 3 国际化(i18n)实战指南

前言

“真正的国际化不是简单的文字翻译，而是文化适配的艺术。” —— 全球化开发准则

经过14天的锤炼，我们的任务管理系统已具备工业级水准。今天将解锁多语言支持能力，让应用走向国际化舞台。

Vue3 官方中文文档传送点： 国际化指南

Vue3 官方中文文档传送点： 简介 | Vue.js

Vue3 的中文官方文档学习笔记很全还有练习场，推荐去官网学习

Vue前端成仙之路：Vue 前端成仙之路_野生的程序媛的博客-CSDN博客

GO后端成神之路：Go 后端成神之路_野生的程序媛的博客-CSDN博客

一、Vue I18n 核心配置

1.1 基础环境搭建

npm install vue-i18n@9

1.2 初始化配置

// src/plugins/i18n.ts
import { createI18n } from 'vue-i18n'// 基础语言包
const messages = {en: {task: {title: 'Task Manager',add: 'Add Task',delete: 'Delete'}},zh: {task: {title: '任务管理系统',add: '添加任务',delete: '删除'}}
}const i18n = createI18n({legacy: false,locale: 'zh',fallbackLocale: 'en',messages
})export default i18n

1.3 全局挂载

// main.ts
import i18n from './plugins/i18n'app.use(i18n)

二、多语言实现方案

2.1 基础使用

<template><h1>{{ $t('task.title') }}</h1><button>{{ $t('task.add') }}</button>
</template><script setup>
import { useI18n } from 'vue-i18n'const { t } = useI18n()
console.log(t('task.delete')) 
</script>

2.2 动态切换语言

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

2.3 高级功能实现

复数处理

{"task": {"count": "{count} task | {count} tasks"}
}

<p>{{ $tc('task.count', taskCount) }}</p>

日期/货币本地化

const { d, n } = useI18n()
const localDate = d(new Date(), 'long')
const localPrice = n(99.99, 'currency')

三、工程化实践

3.1 语言包模块化

src/
└─ locales/├─ en/│  ├─ common.json│  └─ task.json└─ zh/├─ common.json└─ task.json

3.2 异步加载语言包

// 动态加载语言包
async function loadLocaleMessages(locale: string) {const messages = await import(`./locales/${locale}/index.ts`)i18n.global.setLocaleMessage(locale, messages.default)
}// 切换语言时调用
const setLanguage = async (lang: string) => {if (!i18n.global.availableLocales.includes(lang)) {await loadLocaleMessages(lang)}i18n.global.locale.value = lang
}

3.3 与Pinia整合

// stores/languageStore.ts
export const useLanguageStore = defineStore('language', {state: () => ({currentLang: 'zh'}),actions: {async switchLang(lang: string) {await setLanguage(lang)this.currentLang = lang}}
})

四、最佳实践

4.1 翻译规范

场景	正确示例	错误示例
变量插值	{name}的任务	name的任务
标点符号	你好！	你好!
长文本	使用多行JSON格式	拼接字符串

4.2 与UI框架整合

Element Plus国际化配置：

import ElementPlus from 'element-plus'
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
import enLocale from 'element-plus/lib/locale/lang/en'const i18n = createI18n({// ...messages: {zh: { ...zhLocale, ...zhMessages },en: { ...enLocale, ...enMessages }}
})app.use(ElementPlus, {i18n: i18n.global.t
})

4.3 检测未翻译项

配置警告提示：

const i18n = createI18n({// ...missingWarn: false,fallbackWarn: false,warnHtmlMessage: false
})