Vue 3 和 TypeScript 项目中使用 i18n

在 Vue 3 和 TypeScript 项目中使用 i18n（国际化）可以通过 vue-i18n 插件来实现。

步骤 1：安装依赖

首先，你需要安装 vue-i18n：

npm install vue-i18n

步骤 2：创建语言文件

在项目中创建一个文件夹（如 src/i18n），并在其中创建语言文件。比如，创建 en.json 和 zh.json：

src/i18n/en.json

{
  "message": {
    "hello": "Hello World"
  }
}

src/i18n/zh.json

{
  "message": {
    "hello": "你好，世界"
  }
}

步骤 3：配置 i18n

在你的项目中创建一个 i18n 配置文件。例如，创建 src/i18n/index.ts：

src/i18n/index.ts

import { createI18n } from 'vue-i18n';
import en from './en.json';
import zh from './zh.json';

const messages = {
  en,
  zh,
};

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

export default i18n;

步骤 4：在 Vue 应用中使用 i18n

在你的主入口文件中（通常是 src/main.ts），引入并使用 i18n：

src/main.ts

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

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

步骤 5：在组件中使用 i18n

在 Vue 组件中，你可以使用 t 方法来获取翻译文本。以下是一个示例组件：

src/components/HelloWorld.vue

<template>
  <div>
    <p>{{ $t('message.hello') }}</p>
    <button @click="switchLanguage">切换语言</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const switchLanguage = () => {
      const newLocale = i18n.global.locale === 'en' ? 'zh' : 'en';
      i18n.global.locale = newLocale;
    };

    return {
      switchLanguage,
    };
  },
});
</script>

总结

通过上述步骤，你可以在 Vue 3 + TypeScript 项目中成功配置 i18n。这样，项目就支持多语言功能，用户可以在不同的语言之间切换。你可以根据需要扩展更多语言和翻译内容。