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

Question

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

尽管我没有足够的数据来确认，但这些错误似乎与新的产品部署及时相关。它不会发生在本地，仅出现在已部署的代码上。
我见过一些关于 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",

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

Answer 1

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

\n

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

\n

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

\n

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

\n

Answer 2

接受的答案正确地解释了何时触发此错误，但并没有真正提供一个好的解决方案。

我解决这个问题的方法是使用路由器上的错误处理程序。此错误处理程序确保当发生此错误时（因此当部署新版本的应用程序时），下一个路由更改会触发页面的硬重新加载，而不是动态加载模块。代码如下所示：

router.onError((error, to) => {
  if (error.message.includes('Failed to fetch dynamically imported module') || error.message.includes("Importing a module script failed")) {
    window.location = to.fullPath
  }
})

router你的 vue-router 实例在哪里。

Answer 3

就我而言，错误是由于未向.vue模块名称添加扩展名引起的。

import MyComponent from 'components/MyComponent'

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

import MyComponent from 'components/MyComponent.vue'

Answer 4

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

Answer 5

Wouter Sioen 的解决方案很好，但是在修复之后，当发生 chunkLoad 错误时，我遇到了另一个问题：无法读取未定义的属性（读取“fullPath”）。我的解决方案是：

router.onError((error, to) => {
  if (
    error.message.includes('Failed to fetch dynamically imported module') ||
    error.message.includes('Importing a module script failed')
  ) {
    if (!to?.fullPath) {
      window.location.reload();
    } else {
      window.location = to.fullPath;
    }
  }