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

【问题标题】："TypeError: Failed to fetch dynamically imported module" on Vue/Vite vanilla setupVue/Vite vanilla 设置上的“TypeError：无法获取动态导入的模块”
【发布时间】：2021-11-16 20:55:47
【问题描述】：

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

似乎错误与新部署到 prod 的时间相关，尽管我没有足够的数据来确认。它不会发生在本地，只会出现在已部署的代码上。
我已经看到了一些关于 react 设置的类似问题，但没有一个得到令人满意的答复。
我还找到了similar question regarding dynamically imported 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",

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

【问题讨论】：

你能提供一个可重现的项目吗？
你尝试过使用 vanillaJS 路径引用吗？ @/smth/smth 是 VueMagic，可能会导致问题

标签： javascript typescript vue.js webpack vite

【解决方案1】：

我遇到了同样的问题。我发现我的项目还没有开始。

【讨论】：

【解决方案2】：

我遇到了完全相同的问题。就我而言，有些路线有效，有些则无效。解决方案相对容易。我刚刚重启了开发服务器。

【讨论】：