Vue.js实现翻译懒加载时遭遇ChunkLoadError问题求助

问题背景 #

尝试为Vue.js应用实现翻译懒加载，遵循vue-i18n懒加载规范时，出现Promise加载失败导致初始化报错的问题。

文件结构 #

src/translations
   -- AllMessages.ts
   -- bg-BG.json
   -- da-DK.json
   -- en.json 
   ....... 更多多语言json文件

当前i18n.ts代码 #

import Vue from "vue";
import VueI18n from "vue-i18n";
// import { allMessages } from "@/translations/allMessages";

Vue.use(VueI18n);
const selectedLanguage: any = 'en' || something.language.split("-")[0];

const loadedLanguages = ["en"];

const getLanguageMessage = async () =>
  await import(/* webpackChunkName: "selectedLanguage-[request]" */ `@/translations/${selectedLanguage}.json`);

const messages: any = { [selectedLanguage]: getLanguageMessage() }; 
console.log("messages", messages); // 该Promise被拒绝，控制台可见

const i18n = new VueI18n({
  locale: selectedLanguage, // "en",
  fallbackLocale: "en",
  messages: messages, // 设置本地化消息
});

console.log("i18n-message", i18n.messages);


export default i18n;

控制台错误 #

问题核心 #

1. VueI18n初始化时的messages参数需要同步的对象，但代码中直接传入了异步函数返回的Promise，导致初始化失败。
2. 动态导入的路径处理存在问题，且未处理something.language的空值情况，可能引发额外报错。

修正方案 #

方案1：默认语言同步加载，其他语言按需懒加载 #

这种方案保证应用初始化时就有可用的翻译内容，避免空白或报错，同时实现非默认语言的懒加载：

import Vue from "vue";
import VueI18n from "vue-i18n";

Vue.use(VueI18n);

// 同步加载默认语言，确保初始化时有基础翻译
const defaultLocale = "en";
const messages = {
  [defaultLocale]: require("@/translations/en.json").default // 部分环境无需.default，可根据实际情况调整
};

const i18n = new VueI18n({
  locale: defaultLocale,
  fallbackLocale: defaultLocale,
  messages
});

// 记录已加载的语言
let loadedLanguages = [defaultLocale];

// 定义懒加载语言的方法
export function loadLanguageAsync(lang: string) {
  // 语言已加载或为当前locale时直接返回
  if (i18n.locale === lang || loadedLanguages.includes(lang)) {
    return Promise.resolve();
  }

  // 动态加载目标语言文件
  return import(/* webpackChunkName: "lang-[request]" */ `@/translations/${lang}.json`).then(msgs => {
    i18n.setLocaleMessage(lang, msgs.default || msgs);
    loadedLanguages.push(lang);
    i18n.locale = lang;
    return Promise.resolve();
  });
}

// 初始化时加载用户选中的语言（处理空值，避免报错）
const selectedLanguage = 'en' || (something?.language?.split("-")[0] || defaultLocale);
if (selectedLanguage !== defaultLocale) {
  loadLanguageAsync(selectedLanguage);
}

export default i18n;

方案2：异步初始化VueI18n #

适合需要先确定用户语言再完成i18n初始化的场景，需配合Vue实例的异步创建：

import Vue from "vue";
import VueI18n from "vue-i18n";

Vue.use(VueI18n);

async function createI18n() {
  // 处理用户语言，增加空值容错
  const selectedLanguage = 'en' || (something?.language?.split("-")[0] || "en");
  
  // 异步加载选中的语言文件
  const langMessages = await import(/* webpackChunkName: "lang-[request]" */ `@/translations/${selectedLanguage}.json`);
  
  const i18n = new VueI18n({
    locale: selectedLanguage,
    fallbackLocale: "en",
    messages: {
      [selectedLanguage]: langMessages.default || langMessages
    }
  });

  let loadedLanguages = [selectedLanguage];
  
  // 扩展按需加载方法
  i18n.loadLanguageAsync = async (lang: string) => {
    if (i18n.locale === lang || loadedLanguages.includes(lang)) return;
    const msgs = await import(/* webpackChunkName: "lang-[request]" */ `@/translations/${lang}.json`);
    i18n.setLocaleMessage(lang, msgs.default || msgs);
    loadedLanguages.push(lang);
    i18n.locale = lang;
  };

  return i18n;
}

export default createI18n();

对应的main.ts需要异步初始化Vue实例：

import Vue from "vue";
import createI18n from "./i18n";
import App from "./App.vue";

createI18n().then(i18n => {
  new Vue({
    i18n,
    render: h => h(App)
  }).$mount("#app");
});

注意事项 #

• 动态导入路径需保留足够静态部分（如@/translations/），确保webpack正确拆分语言chunk。
• json文件的导出格式因构建工具而异，部分场景需添加.default获取实际翻译对象。
• 始终处理语言变量的空值情况，避免split等方法调用时出现报错。

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