vue打包后动态加载失败Failed to fetch dynamically imported module解决方案

问题复现

其实很早就发现一个vue打包后动态加载的问题，此问题会导致页面卡死不跳转，但是只要手动刷新一下页面又好了，之前一直没有解决，主要搜了一下没发现解决办法，但是目前项目用户数量增多了，不能不解决了😂

使用环境vue3、vite、vue-router都是最新版本

使用动态路由导入方式，类似下面的定义

const routes: RouteRecordRaw[] = [
  {
    path: '/article/:id',
    name: 'article',
    component: () => import('@/views/article/index.vue'),
    meta: {
      title: '文章详情',
    },
  },
];

当修改了article/index.vue文件后，重新打包部署到服务器中，再次请求该页面，控制台就会报错，页面白屏，跳转卡死，但是只要你刷新一下又正常了

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

解决方案

在你的router文件中加入下面的代码即可解决问题：

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

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

可能也有其它的办法，欢迎补充😀

参考vite问题区讨论链接：github.com/vitejs/vite…