Vue/Vite 原生设置中出现“TypeError：无法获取动态导入的模块”

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

尽管我没有足够的数据来确认，但这些错误似乎与新的产品部署及时相关。它不会发生在本地，仅出现在已部署的代码上。
我见过一些关于 React 设置的类似问题，但没有一个得到满意的答复。
我还找到了一个关于动态导入 svgs 的类似问题 https://stackoverflow.com/questions/61488617/uncaught-in-promise-typeerror-failed-to-fetch-dynamically-imported-module，但是我们的错误发生在完整的组件上。

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

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",

有关此问题以及如何调试它的任何其他信息将不胜感激！

当您动态导入路由/组件时，在构建过程中它会创建一个单独的块。默认情况下，块文件名是hashed根据其内容 –Overview.abc123.js。如果不更改组件代码，哈希值将保持不变。如果组件代码发生变化，哈希值也会发生变化 -Overview.32ab1c.js。这对于缓存来说非常有用。

现在，当您收到此错误时会发生以下情况：

1. 您部署应用程序
2. 您的主页块有一个链接到/overview路线，这将加载Overview.abc123.js
3. 客户访问您的网站
4. 您在代码中进行更改，不一定是对 Overview 组件本身进行更改，但可能是对 Overview 导入的某些子组件进行更改。
5. 您部署更改，并且概述现在使用不同的哈希构建 -Overview.32ab1c.js
6. 客户点击/overview链接 - 获取Failed to fetch dynamically imported module错误，因为Overview.abc123.js不复存在

这就是错误与部署相关的原因。解决这个问题的一种方法是不使用延迟加载的路由，但是当你有很多繁重的路由时，这不是一个很好的解决方案 - 它会让你的主包变得很大