vue-cli打包后提交到线上出现“未捕获SyntaxError:意外token"报错

前言:项目使用vue-cli版本2.9.3,vue-router使用<代码> webpackChunkName 实现按需加载。
　　

错误描述:该报错在项目上线一段时间后,有用户反映页面无法正常游览(后面以问题1/问题2区分)

问题1。导航点击无法正常跳转,控制台打印:<代码>错误:加载块{n}失败。

报错截图 　　

问题2。页面全白,控制台打印:未捕获SyntaxError:意想不到的令牌& lt;

　　

报错截图: 　　

经过一番折腾,初步定位问题1在经过<代码>构建/webpack.prod.conf.js 的<代码> chunkhash> 　　

　　

问题1解决方法:捕获路由报的错。(思路来源:https://www.jb51.net/article/147427.htm)

　　 　　 　　routers.onError ((err)=比;{ 　　const模式=/加载块(\ d) +失败/g; 　　const isChunkLoadFailed=err.message.match(模式); 　　如果(isChunkLoadFailed) { 　　让chunkBool=sessionStorage.getItem (“chunkError”); 　　让nowTimes=Date.now (); 　　如果(chunkBool===null | | chunkBool,,nowTimes——方法(chunkBool)比;60000){//路由跳转报错,href手动跳转 　　sessionStorage。setItem (“chunkError”、“重新加载”); 　　const定位路径=routers.history.pending.fullPath; 　　window.location。href=https://www.yisu.com/zixun/window.location.origin +定位路径; 　　}else if (chunkBool===爸卦亍?{//手动跳转后依然报错,强制刷新 　　sessionStorage。setItem (chunkError, Date.now ()); 　　window.location.reload(真正的); 　　} 　　} 　　}) 　　 　　

问题2在网络查看js文件加载的时候发现某个js文件<代码>响应头> 内容类型:应用程序/javascript代码> 　　

　　

　　

　　

　　

问题2目前还在与后台商量如何解决,解决后会更新解决方法分享。有同学遇到同样的问题可以一起讨论或提出更好的解决方案参考学习。★★★

　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

vue-cli打包后提交到线上出现“未捕获SyntaxError:意外token"报错