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

问题描述:

使用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;
  }
});
相关推荐
满分观察网友z2 分钟前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
编程猪猪侠4 分钟前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
满分观察网友z5 分钟前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
西西木科技丨Shopify开发机构11 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙17 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到1118 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆23 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er27 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0630 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444033 分钟前
javaweb———html
前端·javascript·html