重生之我在學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
})