打包并在线提交vue-cli时 出现“未知语法错误:意外令牌”

前言：项目采用vue-CLI 2 . 9 . 3版本，VUE-Router采用webpackChunkName按需加载。

BUG描述：项目上线一段时间后，有用户反映页面无法正常访问(后面用问题1/问题2区分)

问题1。导航点击无法正常跳转，控制台打印：错误：加载区块{n}失败。

错误截图

问题2。页面完全是白色的，控制台打印出：无法解释的语法错误：意外标记

错误截图：

经过一番折腾，build/webpack.prod.conf.js的chunkhash打包的JS文件的哈希值会发生变化，因为每次在线更新代码时，都会删除旧的dist目录，复制上传最新的dist目录，提供后台更新。在更新代码的过程中，用户停留在页面上，当用户更新后重新操作时，会导致错误报告。

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

routers . onerror((err)={ const pattern=/Loading chunk(\ d)失败/g；const isChunkLoadFailed=err . message . match(模式)；if(isChunkLoadFailed){ let chunk bool=session storage . getitem(' chunk error ')；让now times=date . now()；如果(chunk bool===null | | chunk bool now times-par sent(chunk bool)60000){//路由跳转错误，href手动跳转session storage . setitem(' chunk bool '，' reload ')；const target path=routers . history . pending . full path；window . location . href=window . location . origin target path；} else if(chunk bool===' reload '){//手动跳转后仍报告错误，强制刷新session storage . setitem(' chunk bool '，date . now())；window . location . reload(true)；}}})问题2检查网络上js文件的加载情况时，发现一个js文件的内容类型，Response Header，异常。通常，它返回内容类型：应用程序/JavaScript。但是，js的一个响应是HTML，JS无法识别符号，这导致了一个错误被抛出

问题2还在和后台讨论如何解决。解决后，解决方案将被更新和共享。一些遇到同样问题的同学可以一起讨论或者提出更好的解决方案供参考。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。