Vue3组合式API中拆分vue-i18n翻译文件的实现方案

当然可以实现这种按需加载的需求，完全能把低频页面的翻译拆分到独立文件，仅在用户访问对应页面/组件时才加载，下面是具体实现步骤：

1. 拆分独立翻译文件 #

在你的@/i18n目录下新建子目录（比如locales/async），专门存放低频页面的翻译文件，示例结构：

src/i18n/
├── messages.ts       # 原有全局基础翻译
└── locales/
    ├── async/
    │   ├── en-low.ts # 英文低频页面翻译
    │   └── zh-low.ts # 中文低频页面翻译

示例翻译文件内容（en-low.ts）：

export default {
  lowPage: {
    title: "Low Frequency Page",
    content: "This is a page with lots of text that's rarely accessed."
  }
}

2. 在目标组件中按需加载并合并到全局i18n #

在需要使用这些低频翻译的组件中，通过动态导入（import()）加载对应语言的翻译文件，然后合并到全局i18n的消息池中，这样全局的t函数就能直接使用这些翻译内容：

<script setup lang="ts">
import { useI18n, useLocale } from 'vue-i18n';
import { onMounted } from 'vue';

const { t, global } = useI18n({ useScope: 'global' });
const locale = useLocale();

// 标记是否已加载过当前语言的低频翻译，避免重复加载
let isLoaded = false;

onMounted(async () => {
  if (isLoaded) return;
  
  // 根据当前语言动态导入对应的翻译文件
  const langModule = await import(`@/i18n/locales/async/${locale.value}-low.ts`);
  // 合并到全局消息池（不会覆盖原有翻译，只会新增/合并字段）
  global.mergeLocaleMessage(locale.value, langModule.default);
  
  isLoaded = true;
});
</script>

<template>
  <div>
    <h1>{{ t('lowPage.title') }}</h1>
    <p>{{ t('lowPage.content') }}</p>
  </div>
</template>

3. 备选方案：局部作用域翻译（仅当前组件生效） #

如果你希望这些翻译仅在当前组件内生效，不污染全局消息池，可以直接在useI18n中传入动态加载的翻译文件，使用局部作用域：

<script setup lang="ts">
import { useI18n, useLocale } from 'vue-i18n';
import { ref, onMounted } from 'vue';

const locale = useLocale();
const localMessages = ref({});

onMounted(async () => {
  const langModule = await import(`@/i18n/locales/async/${locale.value}-low.ts`);
  localMessages.value = { [locale.value]: langModule.default };
});

// 使用局部作用域，只加载当前组件的翻译
const { t } = useI18n({ 
  useScope: 'local',
  messages: localMessages.value
});
</script>

注意事项 #

• 动态导入的路径要符合Vite的动态导入规则，用模板字符串配合变量即可，Vite会自动识别并拆分对应的chunk文件。
• 如果项目有多种语言，要确保每个语言的低频翻译文件都存在，或者添加try/catch做错误处理避免加载失败。

内容的提问来源于stack exchange，提问作者Paulie