Failed to load module scriptFailed to load module script: Ex

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. vue-router-85ea15a4.js:5 TypeError: Failed to fetch dynamically imported module: http://192.168.51.34:31405/assets/Index-59baab44.js

问题排查

尽管Jenkins显示打包成功，但猜测引入的可能是旧包，导致新包发布时覆盖了旧包。若存在缓存，这一问题可能不容易复现。为确保每次发布都及时更新，应当考虑在不清除缓存的情况下解决该问题，以提高新版本的可靠性。通过设置 <meta http-equiv="Pragma" content="no-cache" />确保版本及时更新，

验证一：刷新后恢复正常

验证二：如下图

在定位到文件目录时，以服务器位置或者Kuboard为例，复制了报错文件的名称"Index-59baab44"进行查询，但未能找到任何结果。这表明该文件不存在。进一步观察报错信息，发现了如下描述： Expected a JavaScript module script but the server responded with a MIME type of "text/html"。具体而言，期望获得一个名为"Index-59baab44.js"的JavaScript文件，但实际上得到的是一个HTML，而且这个HTML显示了404错误。

解决方法一：

简单粗暴，捕捉这个错误信息，运行 window.location.reload()

解决方法二：

本地存储版本号：在本地存储中维护一个版本号。生成新版本：在打包生成新包的同时，生成一个新的版本号。版本号比较：在页面请求时，通过比较存储的版本号和新生成的版本号，来判断是否需要进行代码更新。

router.beforeEach((to, from, next) => {
  if (localStorage.getItem('globalVersion') !== globalVersion) {
    localStorage.setItem('globalVersion', globalVersion)
    window.location.reload()
  }
})

解决方法三：

router文件捕获错误信息重载

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