Vue/Vite vanilla 设置上的“TypeError：无法获取动态导入的模块”

Question

我们有一个普通的 Vue/Vite 设置，我在哨兵日志上收到 TypeError: Failed to fetch dynamically imported module 。

尽管我没有足够的数据来确认，但这些错误似乎与新的 prod 部署及时相关。它不会发生在本地，仅出现在已部署的代码上。

我已经看到了一些关于 react 设置的类似问题，但没有一个得到令人满意的回应。

我还发现了一个 关于动态导入 svgs 的类似问题，但我们的错误发生在完整组件上。

我们使用动态导入组件的唯一地方是路由：

 export const router = createRouter({
  history: routerHistory,
  strict: true,
  routes: [
    {
      path: '/',
      name: routes.homepage.name,
      component: () => import('@/views/Home.vue'),
      children: [
        {
          path: '/overview',
          name: routes.overview.name,
          component: () => import('@/views/Overview.vue'),
        },
        // other similar routes
      ],
    },
  ],
});

我们的部门版本：

     "vue": "^3.0.9",
    "vue-router": "^4.0.5",
    "vite": "^2.0.5",

非常感谢有关此问题的任何其他信息以及如何调试它！

原文由 Fernando H‘.’ 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在我的情况下，错误是由于未在模块名称中添加 .vue 扩展名引起的。

 import MyComponent from 'components/MyComponent'

它在 webpack 设置中工作，但需要 Vite 文件扩展名：

 import MyComponent from 'components/MyComponent.vue'

原文由 Ilyich 发布，翻译遵循 CC BY-SA 4.0 许可协议