vue i18n多语言拆分语言包参考

要将 locales/en.json 拆分为多个文件，并自动读取这些语言包，可以采用与中文语言包相似的方式。以下是具体步骤：

1. 创建语言包文件夹和子文件

首先，在 locales 文件夹中创建一个 en 文件夹，并在其中添加多个 JSON 文件。例如：

src/
├── locales/
│   ├── en/
│   │   ├── common.json
│   │   ├── homepage.json
│   │   └── settings.json
│   └── zh/
│       ├── common.json
│       ├── homepage.json
│       └── settings.json

2. 编写语言包内容

在每个文件中定义翻译内容：

common.json:

{
  "appName": "My Application",
  "welcome": "Welcome to our application"
}

homepage.json:

{
  "title": "Homepage",
  "description": "This is a sample homepage"
}

settings.json:

{
  "settings": "Settings",
  "language": "Language"
}

3. 自动读取英文语言包

在你的 i18n 配置文件中，使用动态导入或 require.context 来自动加载这些语言包：

使用 Webpack 的 require.context

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

const loadLocaleMessages = (locale) => {
  const messages = {};
  const context = require.context(`./locales/${locale}`, true, /\.json$/);
  context.keys().forEach((key) => {
    const message = context(key);
    Object.assign(messages, message);
  });
  return messages;
};

const messages = {
  en: loadLocaleMessages('en'),
  zh: loadLocaleMessages('zh'), // 假设你也有中文语言包
};

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

export default i18n;

使用 Vite 的动态导入

如果你使用 Vite，可以用以下方式：

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

const loadLocaleMessages = async (locale) => {
  const messages = {};
  const localeFiles = import.meta.glob(`./locales/${locale}/*.json`);
  
  for (const path in localeFiles) {
    const message = await localeFiles[path]();
    Object.assign(messages, message);
  }
  
  return messages;
};

const i18n = createI18n({
  locale: 'en', // 设置默认语言
  messages: {
    en: await loadLocaleMessages('en'), // 使用动态导入
    zh: await loadLocaleMessages('zh'), // 假设你也有中文语言包
  },
});

export default i18n;

4. 在组件中使用翻译

在你的 Vue 组件中，可以像之前一样使用 $t 方法来获取翻译文本：

<template>
  <div>
    <h1>{{ $t("appName") }}</h1>
    <p>{{ $t("welcome") }}</p>
    <h2>{{ $t("title") }}</h2>
    <p>{{ $t("description") }}</p>
    <h3>{{ $t("settings") }}</h3>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
};
</script>

总结

通过将英文语言包拆分为多个文件并使用动态导入或 require.context 自动加载，你可以更灵活地管理和维护翻译内容。这种结构适用于多种语言，使你的 i18n 实现更加模块化和高效。