vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错

 更新时间:2018-11-06 15:00:47   作者:佚名   我要评论(0)

前言: 项目使用vue-cli版本2.9.3 ,vue-router使用webpackChunkName实现按需加载.



BUG描述:该报错在项目上线一段时间后,有用户反映页面无法正常游览 (后面

前言: 项目使用vue-cli版本2.9.3 ,vue-router使用webpackChunkName实现按需加载.

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

问题1.导航点击无法正常跳转,console打印:Error:Loading chunk {n} failed.

报错截图

问题2.页面全白,console打印:Uncaught SyntaxError:Unexpected token <

报错截图:

经过一番折腾,初步定位问题1在经过build/webpack.prod.conf.jschunkhash打包后的JS文件hash值会有变更,因为每次更新代码到线上都会删除旧的dist目录,将最新的dist目录copy上传提供后台更新. 在更新代码的这个过程用户停留在页面上,当用户在更新完后重新操作就会导致报错

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

routers.onError((err) => {
 const pattern = /Loading chunk (\d)+ failed/g;
 const isChunkLoadFailed = err.message.match(pattern);
 if (isChunkLoadFailed) {
  let chunkBool = sessionStorage.getItem('chunkError');
  let nowTimes = Date.now();
  if (chunkBool === null || chunkBool && nowTimes - parseInt(chunkBool) > 60000) {//路由跳转报错,href手动跳转
   sessionStorage.setItem('chunkError', 'reload');
   const targetPath = routers.history.pending.fullPath;
   window.location.href = window.location.origin + targetPath;
  }else if(chunkBool === 'reload'){ //手动跳转后依然报错,强制刷新
   sessionStorage.setItem('chunkError', Date.now());
   window.location.reload(true);
  }
 }
})

问题2在Network查看js文件加载的时候发现某个js文件Response Headercontent-type异常,正常情况返回content-type: application/javascript. 但是有一个js响应的内容为HTML, js无法识别<符号导致抛出报错


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

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

您可能感兴趣的文章:

  • vue-cli中打包图片路径错误的解决方法
  • vue-cli 如何打包上线的方法示例
  • 使用vue-cli打包过程中的步骤以及问题的解决
  • Vue-cli配置打包文件本地使用的教程图解
  • 基于vue-cli 打包时抽离项目相关配置文件详解
  • 解决vue-cli脚手架打包后vendor文件过大的问题
  • 解决Vue-cli npm run build生产环境打包,本地不能打开的问题

相关文章

  • vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错

    vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错

    前言: 项目使用vue-cli版本2.9.3 ,vue-router使用webpackChunkName实现按需加载. BUG描述:该报错在项目上线一段时间后,有用户反映页面无法正常游览 (后面
    2018-11-06
  • vue实现自定义日期组件功能的实例代码

    vue实现自定义日期组件功能的实例代码

    实现一个日期组件,如图: components.js代码如下: Vue.component('sc-calendar',{ template:'<div class="scCalendar">' + '<div class="calenda
    2018-11-06
  • 易语言彻底删除指定的文件

    易语言彻底删除指定的文件

    删除文件命令 英文命令:kill 操作系统支持:Windows、Linux 所属类别:磁盘操作 成功返回真,失败返回假。 语法: 逻辑型 删除文件 (欲删除的文件名
    2018-11-06
  • 易语言在指定路径下新建一个文件夹目录

    易语言在指定路径下新建一个文件夹目录

    创建目录命令 英文命令:MkDir 操作系统支持:Windows、Linux 所属类别:磁盘操作 创建一个新的目录。成功返回真,失败返回假。 语法: 逻辑型 创建目录
    2018-11-06
  • 易语言播放指定的音乐文件

    易语言播放指定的音乐文件

    播放音乐命令 英文命令:PlayMusic 操作系统支持:Windows 所属类别:媒体播放 可以播放 .WAV、.MID 声音文件或相应格式的字节集声音数据、声音资源。成
    2018-11-06
  • electron中使用bootstrap的示例代码

    electron中使用bootstrap的示例代码

    安装 安装bootstrap命令如下: npm install bootstrap --save 安装后可能报告如下错误: npm WARN bootstrap@4.1.3 requires a peer of popper.
    2018-11-06
  • 微信小程序实现选项卡效果

    微信小程序实现选项卡效果

    本文实例为大家分享了微信小程序实现选项卡效果展示的具体代码,供大家参考,具体内容如下 demo.wxss .swiper-tab{ width: 100%; border-bottom:
    2018-11-06
  • Vue递归实现树形菜单方法实例

    Vue递归实现树形菜单方法实例

    什么是树形菜单还是要简单的啰嗦一下,比如: 上图是截图自elementui的实例,实现方式是用文档结构(类似像原生Dom文档结构的写法)的方式,好处就是很灵
    2018-11-06
  • Vue常用的几个指令附完整案例

    Vue常用的几个指令附完整案例

    越来越多的人在用Vue,刚开始接触vue的话常接触的指令就几个,统一归纳一下,做个demo演示。 指令 v-text v-html v-bind v-on v-model v-for 代
    2018-11-06
  • 微信小程序自定义tabBar组件开发详解

    微信小程序自定义tabBar组件开发详解

    本文实例为大家分享了微信小程序自定义tabBar组件的具体代码,供大家参考,具体内容如下 以下代码保存在github地址 先看一看目录 template文件夹里存放tabb
    2018-11-06

最新评论