Vue-i18n报错：Cannot read property 'config' of undefined问题求助

看起来你遇到的问题核心是lang.js没有正确导出i18n实例，或者实例在导出时还未完成初始化——毕竟你提到routes.js用了完全相同的拆分方式却没问题，那大概率是lang.js的导出或初始化环节出了岔子。下面是一步步的排查和解决方法：

1. 先检查lang.js的导出逻辑（最常见原因） #

routes.js能正常工作，说明它的导出方式是正确的，你可以直接对照routes.js的写法来调整lang.js：

• 确保你在lang.js的末尾用export default i18n;导出实例，而不是用命名导出（比如export const i18n = ...），除非App.js里的导入方式也对应调整了。
• 给你一个标准的lang.js示例，参考这个结构来写：

  import i18n from 'i18next';
  import { initReactI18next } from 'react-i18next';
  
  // 初始化i18n配置
  i18n
    .use(initReactI18next) // 绑定react-i18next
    .init({
      resources: {
        en: { translation: { hello: "Hello" } },
        zh: { translation: { hello: "你好" } }
      },
      lng: 'zh', // 默认语言
      fallbackLng: 'en', // fallback语言
      interpolation: { escapeValue: false } // React已经做了转义，不需要额外处理
    });
  
  // 关键：正确导出i18n实例
  export default i18n;
  

2. 排查初始化顺序或异步问题 #

如果你的lang.js里用到了异步加载翻译资源（比如i18next-http-backend），可能会出现导出时实例还未完全初始化的情况，但routes.js一般是同步的路由配置，所以不会有这个问题：

• 如果用了异步后端，确保你没有在初始化完成前就导出实例，或者在App.js里通过I18nextProvider正确传入实例即可，比如：

  // App.js
  import i18n from './lang.js';
  import { I18nextProvider } from 'react-i18next';
  import AppRoutes from './routes.js';
  
  function App() {
    return (
      <I18nextProvider i18n={i18n}>
        <AppRoutes />
      </I18nextProvider>
    );
  }
  
  export default App;
  

  这种写法会自动等待i18n初始化完成，不会出现config未定义的问题。

3. 检查是否存在循环依赖 #

有时候如果App.js里的某个模块又导入了lang.js，而lang.js又依赖App.js里的内容，会形成循环依赖，导致导出的i18n变成undefined：

• 检查lang.js的导入语句，看看有没有导入App.js或者其他依赖App.js的模块；
• 对比routes.js的依赖，routes.js应该只导入了路由相关的组件，没有循环依赖，所以照着这个思路清理lang.js的依赖即可。

4. 确认导入路径是否正确 #

最后再确认一下App.js里的导入路径import i18n from './lang.js';是否正确：

• 如果lang.js和App.js不在同一目录，路径要调整（比如../lang.js）；
• 对比routes.js的导入路径，确保lang.js的路径和routes.js的路径逻辑一致。

按照上面的步骤排查，尤其是第一步的导出逻辑，应该能解决你遇到的错误。

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