vue3+ts Typerror: Failed to fetch dynamically imported module

大坑！！！！！！！！！！

一直以为是自己代码的问题。搞了好久都没有解决 现在记录下这个问题

issues地址：

TypeError: Failed to fetch dynamically imported module · Issue #11804 · vitejs/vite · GitHub

问题复现的效果：

vue打包后动态加载的问题，此问题会导致页面卡死不跳转，但是只要手动刷新一下页面又好了

出现的原因：

问题原因主要是文件内容被修改后，此时的hash值和之前不同，从而导致打包后最终产物的文件名变更，但此时如果不刷新的话运行时加载的文件名称还是旧的名称，最终因找不到文件而报错：Failed to fetch dynamically imported module

出现的条件：

1、先打开线上的地址

2、推新的代码（或者重新部署一下 部署好之后，不要刷新页面 直接点击菜单或者其他地方用到了动态路由的。）

3、点击菜单或者其他操作 就有可能出现上面的情况（我这边是必现）。

解决办法：

在你的router.beforeEach后面加以下代码：

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

注意：如果你的项目在二级目录下，此时需要在to.fullpath前加上import.meta.env.BASE_URL或者你的目录名，不然会导致404

总结：

上面的办法也只是权宜之计 并不是最完美的办法，目前vite官方也没有解决这个问题。希望官方给大家一个解决的办法吧。

部分内容转载：

vue打包后动态加载失败Failed to fetch dynamically imported module解决方案_前端知识库