脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue-cli 打包提交到线上报错

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

 更新时间：2018年11月06日 14:40:13   作者：Sam_Lii  
这篇文章主要介绍了vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

前言: 项目使用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.js的chunkhash打包后的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目前还在与后台商量如何解决,解决后会更新解决方法分享.有同学遇到同样的问题可以一起讨论或提出更好的解决方案参考学习.★★★

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

您可能感兴趣的文章:

相关文章

  • 解决ant Design Search无法输入内容的问题

    解决ant Design Search无法输入内容的问题

    这篇文章主要介绍了解决ant Design Search无法输入内容的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 详解在vue-cli中使用graphql即vue-apollo的用法

    详解在vue-cli中使用graphql即vue-apollo的用法

    这篇文章主要介绍了详解在vue-cli中使用graphql即vue-apollo的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Vue使用NProgress实现页面顶部的进度条显示效果

    Vue使用NProgress实现页面顶部的进度条显示效果

    这篇文章主要介绍了vue Nprogress页面顶部进度条功能实现,NProgress是页面跳转是出现在浏览器顶部的进度条，本文通过实例代码给大家讲解，需要的朋友可以参考下
    2022-12-12
  • VUE3中watch和watchEffect的用法详解

    VUE3中watch和watchEffect的用法详解

    本文主要介绍了VUE3中watch和watchEffect的用法详解，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-02-02
  • Vue 2中实现CustomRef方式防抖节流

    Vue 2中实现CustomRef方式防抖节流

    这篇文章主要为大家介绍了Vue 2中实现CustomRef方式防抖节流示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-02-02
  • Vue中遍历数组的新方法实例详解

    Vue中遍历数组的新方法实例详解

    这篇文章主要介绍了Vue中遍历数组的新方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-07-07
  • Vue组件化开发思考

    Vue组件化开发思考

    这篇文章主要介绍了Vue组件化开发的思考以及相关的原理介绍，如果你对此有兴趣，可以学习参考下。
    2018-02-02
  • Ant design vue中的联动选择取消操作

    Ant design vue中的联动选择取消操作

    这篇文章主要介绍了Ant design vue中的联动选择取消操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 一看就会的vuex实现登录验证（附案例）

    一看就会的vuex实现登录验证（附案例）

    这篇文章主要介绍了一看就会的vuex实现登录验证（附案例），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • 函数式组件劫持替代json封装element表格

    函数式组件劫持替代json封装element表格

    这篇文章主要介绍了为大家函数式组件劫持替代json封装element表格的过程思路及示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07

最新评论