vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unex

Allen 发布于2019-08-23 12:50 / 2593人阅读

摘要：前言项目使用版本使用实现按需加载描述该报错在项目上线一段时间后有用户反映页面无法正常游览后面以问题问题区分问题导航点击无法正常跳转刷新后恢复正常打印报错截图问题页面全白并且刷新仍然无效打印报错截图经过一番折腾初步定位问题在经过的打包后的

前言: 项目使用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://segmentfault.com/a/11... )

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默认build后的文件名格式为js/[name].[chunkhash].js,每次npm run build后有改动的文件hash值都会改变,上传后Nginx无法找到最新上传的文件,所以返回了默认index.html里的内容,我们的文件后缀名是.js自然无法识别这种标签符号,导致console抛出Uncaught SyntaxError:Unexpected token <,我尝试修改build/webpack.prod.conf.jsoutput输出文件名格式,目前问题已得到解决

海外云主机服务器托管 cdn加速后出现504 提交后为什么 android打包后 js 提交后清空表单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99034.html

Vue-项目从本地搭建到线上部署（wǒ shì biaō tí dǎng）

摘要：放置在目录下或通过绝对路径被引用。对于相关来说，我们推荐使用而不是直接链式指定。在不更改配置文件的情况下，前端页面迭代发布，不需要重启服务。作者：gauseen 0. 关于 Vuejs 简介：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，易用、灵活、高效。生态系统项目介绍 awesome-vue Vue.js 相关很棒的...

Arno 2019-08-26 13:49 评论0 收藏0
网站子目录部署VUE webpack 打包资源文件路径的正确引用方式

摘要：是目前使用最为火热的打包工具，各大知名的框架类库都用其打包，国内使用最近也火热起来。但是坑也很多，比如说图片，字体等文件的路径。 webpack 是目前使用最为火热的打包工具，各大知名的框架类库都用其打包，国内使用最近也火热起来。它在单页应用和类库打包上帮助许多人从代码管理中解脱了出来，成为了当下风靡一时的打包工具。但是坑也很多，比如说图片，字体等文件的路径。刚开始用webpack...

zgbgx 2019-08-21 17:45 评论0 收藏0
vue先hash 模式部署项目，然后开启histroy模式，引发的几个问题以及histroy模式的

摘要：先模式，后模式就像开头说的，这里的问题指的是先用模式部署项目到线上，然后再开启模式，由此引发的一些问题。后话以上就是本文的所有内容，建议项目一开始还是直接跟后端说一下，开启模式，省得后面的种种坑。前言： vue路由有一个HTML5 History 模式,这个模式要在路由里面另外开启的，很多人在刚使用路由的时候之前不知道这个模式，所以并没有启用，然后就把项目部署上去了，因为这个模式还是...

Imfan 2019-08-21 18:23 评论0 收藏0
前端开发之走进Vue.js

摘要：作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。的新版本，的简称。的包管理工具，用于同一管理我们前端项目中需要用到的包插件工具命令等，便于开发和维护。 Vue.js作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文旨在帮助大家认识Vue.js，了解Vue.js的开发流程，并进一步理解如何通...

zxhaaa 2019-08-20 15:20 评论0 收藏0