【已解决】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;
  }
});
相关推荐
aha-凯心22 分钟前
前端学习 vben 之 axios interceptors
前端·学习
熊出没39 分钟前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN39 分钟前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
用户99045017780091 小时前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家1 小时前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞2 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆2 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记2 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆2 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636022 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端