Vue i18n翻译模块添加接口请求后出现context is undefined报错如何解决

问题根因 #

你将loadLocales调整为async异步函数后，异步函数默认返回Promise对象，你直接同步执行const { context, messages } = loadLocales()无法拿到实际返回值，两个变量均为undefined，因此后续访问context.id自然抛出类型错误。

修复方案 #

同时适配「合并本地+接口翻译」的需求，修正后的代码如下：

const loadLocales = async () => {
  const context = require.context('./locales', true);
  // 拉取接口端翻译
  const remoteRes = await ApiService.post(`${translationToolUrl}/gateway/translations`, { project: 'myProject' });
  const remoteTrans = remoteRes.data; // 可根据接口实际返回结构调整取值路径
  // 加载本地翻译
  const localMessages = context.keys()
    .map((key) => ({ key, locale: key.match(/[-a-z0-9_]+/i)[0] }))
    .reduce((msgs, { key, locale }) => ({
      ...msgs,
      [locale]: extendMessages(context(key)),
    }), {});
  // 合并翻译：当前配置为接口翻译优先覆盖本地同key内容，如需本地优先调换两者顺序即可
  const mergedMessages = Object.keys({...localMessages, ...remoteTrans}).reduce((acc, locale) => {
    acc[locale] = {
      ...(localMessages[locale] || {}),
      ...(remoteTrans[locale] || {})
    }
    return acc
  }, {})
  return { context, messages: mergedMessages };
};

// 异步初始化基础变量和i18n实例
let i18n = null
let context = null
let messages = null
(async () => {
  const initRes = await loadLocales()
  context = initRes.context
  messages = initRes.messages
  i18n = new VueI18n({
    locale: 'en',
    fallbackLocale: 'en',
    silentFallbackWarn: true,
    messages,
  });
  // 原有i18n挂载逻辑（比如export default i18n、Vue.use(i18n)等）放在此处执行
})()

if (module.hot) {
  module.hot.accept(context.id, async () => {
    // 热更新时也要异步等待加载完成
    const { messages: newMessages } = await loadLocales();
    Object.keys(newMessages)
      // 可替换为项目内的深比较方法替代JSON.stringify，性能和准确性更高
      .filter((locale) => JSON.stringify(messages[locale]) !== JSON.stringify(newMessages[locale]))
      .forEach((locale) => {
         const msgs = newMessages[locale];
         messages[locale] = msgs;
         i18n.setLocaleMessage(locale, msgs);
       });
  });
}

后续切换纯远程翻译的调整方法 #

不需要本地翻译时，直接删除loadLocales内加载本地文件、合并翻译的逻辑，直接用接口返回的remoteTrans生成messages即可，其余逻辑无需改动。

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