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