Vue 3 中使用 vue-i18n 实现多语言支持

在构建多语言应用程序时，使用国际化的概念非常重要。Vue 3 提供了多种方式来实现国际化支持，其中最常用的是使用 vue-i18n 插件。本文将介绍如何在 Vue 3 项目中集成和使用 vue-i18n。

一、安装 vue-i18n

通过 npm 或 yarn 安装 vue-i18n

npm install vue-i18n
# 或者
yarn add vue-i18n

二、初始化 i18n 实例

在项目的主文件（通常是 main.js 或 main.ts）中初始化 i18n 实例。

import { createApp } from 'vue';
import App from '@/App.vue'
import { createI18n } from 'vue-i18n';

// 定义语言信息
const messages = {
  en: {
    message: {
      hello: 'Hello world',
      welcome: 'Welcome to our site!'
    }
  },
  zh: {
    message: {
      hello: '你好，世界',
      welcome: '欢迎来到我们的网站！'
    }
  }
};

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

// 创建 Vue 应用
const app = createApp(App);

// 使用 i18n 实例
app.use(i18n);

// 挂载应用
app.mount('#app');

三、使用 i18n

在组件中使用 $t 方法获取翻译文本。

<template>
  <div>
    <p>{{ $t('message.hello') }}</p>
    <p>{{ $t('message.welcome') }}</p>
    <button @click="switchLanguage">Switch Language</button>
  </div>
</template>

<script>
export default {
  methods: {
    switchLanguage() {
      this.$i18n.locale = this.$i18n.locale === 'en' ? 'zh' : 'en';
    },
  },
};
</script>

四、动态切换语言

提供一个按钮或选项让用户能够动态地切换语言。

五、配置多个语言文件

对于大型项目，推荐为每种语言创建单独的 JSON 文件。例如：

• locales/en.json
• locales/zh.json

然后在初始化 i18n 时加载这些文件。

import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';

// 加载语言文件
import enMessages from './locales/en.json';
import zhMessages from './locales/zh.json';

const messages = {
  en: enMessages,
  zh: zhMessages,
};

const i18n = createI18n({
  locale: 'en', // 设置默认语言
  messages,
});

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

六、结语

通过以上步骤，您可以在 Vue 3 项目中轻松实现多语言支持。vue-i18n 提供了许多高级功能，如命名空间、时区支持等，建议深入阅读官方文档以了解更多细节。