【已解决】Vite 部署后报错：Failed to fetch dynamically imported module

抹茶san2023-11-30 13:46

问题描述：

使用Vite打包构建的项目，重新部署到生产。在部署期间用户一直停留在当前项目页面，部署完成后点击页面上的路由，报错！刷新后恢复正常。

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

TypeError: Failed to fetch dynamically imported module: xxx/assets/index-4f5b61b3.js

在Vite的github找到下面这个issue，一模一样的问题

github.com/vitejs/vite...

Since switching to Vite we noticed a new production issue, where sometimes users are encountering an error if we deploy while they have an active session:

这个issue留言还比较多，同时也找到了解决方法：

js 复制代码

// Hard-reload the page when chunk load errors match the navigation error
const routerInstance = router();
routerInstance.onError((error, to) => {
  const errors = ['Failed to fetch dynamically imported module', 'Unable to preload CSS'];

  if (errors.some((e) => error.message.includes(e))) {
    window.location = to.fullPath;
  }
});