博客站

在 Vue 3 中实现国际化（i18n）通常使用 Vue I18n 库。Vue I18n 是 Vue 生态中功能强大且广泛使用的国际化解决方案。以下是实现国际化的详细步骤：

1. 安装 Vue I18n

首先，安装 Vue I18n 库：

npm install vue-i18n@next

2. 配置 Vue I18n

在 Vue 3 应用中配置 Vue I18n。

创建 i18n 实例

// src/i18n.js
import { createI18n } from 'vue-i18n';

// 定义语言包
const messages = {
  en: {
    welcome: 'Welcome',
    greeting: 'Hello, {name}!',
  },
  zh: {
    welcome: '欢迎',
    greeting: '你好，{name}！',
  },
};

// 创建 i18n 实例
const i18n = createI18n({
  locale: 'en', // 默认语言
  fallbackLocale: 'en', // 回退语言
  messages, // 语言包
});

export default i18n;

在应用中引入 i18n

在 main.js 中将 i18n 实例注入到 Vue 应用中：

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import i18n from './i18n';

const app = createApp(App);
app.use(i18n);
app.mount('#app');

3. 在组件中使用国际化

在组件中使用 Vue I18n 提供的 API 实现国际化。

使用 $t 翻译文本

$t 是 Vue I18n 提供的翻译函数，用于根据当前语言获取对应的文本。

<template>
  <div>
    <h1>{{ $t('welcome') }}</h1>
    <p>{{ $t('greeting', { name: 'Alice' }) }}</p>
  </div>
</template>

切换语言

通过 i18n.global.locale 动态切换语言。

<template>
  <div>
    <button @click="changeLanguage('en')">English</button>
    <button @click="changeLanguage('zh')">中文</button>
  </div>
</template>

<script>
import { useI18n } from 'vue-i18n';

export default {
  setup() {
    const { locale } = useI18n();

    function changeLanguage(lang) {
      locale.value = lang;
    }

    return {
      changeLanguage,
    };
  },
};
</script>

4. 处理复数形式和日期格式化

Vue I18n 支持复数形式和日期格式化。

复数形式

在语言包中定义复数形式：

const messages = {
  en: {
    apple: 'apple | apples',
  },
  zh: {
    apple: '苹果 | 苹果',
  },
};

在模板中使用：

<template>
  <p>{{ $tc('apple', 2) }}</p>
</template>

日期格式化

使用 $d 格式化日期：

<template>
  <p>{{ $d(new Date(), 'short') }}</p>
</template>

在语言包中定义日期格式：

const datetimeFormats = {
  en: {
    short: {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
    },
  },
  zh: {
    short: {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
    },
  },
};

const i18n = createI18n({
  locale: 'en',
  messages,
  datetimeFormats,
});

5. 懒加载语言包

为了优化性能，可以按需加载语言包。

定义语言包加载函数

// src/i18n.js
import { createI18n } from 'vue-i18n';

const i18n = createI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {}, // 初始为空
});

export async function loadLocaleMessages(locale) {
  const messages = await import(`@/locales/${locale}.json`);
  i18n.global.setLocaleMessage(locale, messages.default);
  return nextTick();
}

export default i18n;

在切换语言时加载语言包

<template>
  <button @click="changeLanguage('en')">English</button>
  <button @click="changeLanguage('zh')">中文</button>
</template>

<script>
import { useI18n } from 'vue-i18n';
import { loadLocaleMessages } from '@/i18n';

export default {
  setup() {
    const { locale } = useI18n();

    async function changeLanguage(lang) {
      await loadLocaleMessages(lang);
      locale.value = lang;
    }

    return {
      changeLanguage,
    };
  },
};
</script>

6. 总结

在 Vue 3 中实现国际化的步骤如下：

1. 安装 Vue I18n：通过 npm install vue-i18n@next 安装。
2. 配置 i18n 实例：定义语言包并创建 i18n 实例。
3. 在组件中使用国际化：通过 $t、$tc、$d 等 API 实现文本翻译、复数形式和日期格式化。
4. 切换语言：通过 i18n.global.locale 动态切换语言。
5. 懒加载语言包：按需加载语言包以优化性能。

通过以上步骤，你可以轻松地在 Vue 3 应用中实现国际化，支持多语言切换和动态加载语言包。