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

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

赞 (0)

相关推荐

  • 解决vue-cli webpack打包开启Gzip 报错问题

    前两天项目上线,用vue-cli npm run build命令打包,打包完成后我擦吓了一跳,15M.本来暂时不打算优化的,但是每次看着部署包这么大,想想还是先优化一下,让包好看点,免得以后出现心理阴影! 在把 map文件干掉后,发现webpack这打包的速度,也忒感人了.在进行不自动生成 map文件设置时,有看到webpack自带的productionGzip功能,索性就一次性一起鼓捣鼓捣. 下面是瞎鼓捣历程,差点就鼓捣不出来了. 1.在项目 根目录config/index.js中build内

  • vue-cli 项目打包完成后运行文件路径报错问题

    本文介绍了vue-cli 项目打包完成后运行文件路径报错问题,做个笔记,也分享给大家. 刚新建的vue-cli项目,同事说要打包一版进行测试,打包完成后放在tomcat上发现路径报错问题. 百度了一下,怀疑是build里面没有定义路径问题,度友提供了解决方案: 找到config文件夹下的index.js文件,修改路径代码 找到build对象,修改属性assetsPublicPath为 './' 但是由于vue-cli项目中已经没有config文件夹,需要在根目录下创建vue.config.js

  • 解决vue打包后刷新页面报错：Unexpected token <

    前言 今天遇到了一个很怪的问题,在vue-cli+webpack的项目中,刷新特定页面后页面会变空白,报错为index.html文件中Unexpected token <. 怪点一是开发环境没有问题,只有生产环境有问题,怪点二是只有一个页面有问题,其他页面完全正常 正文 报错截图: 根据上面的情况和以往经验,应该在index.html页面及发生错误的页面定位问题,但均解决不了问题. 最后找到此项目的路由处,经过多次测试,解决问题,也确定了问题原由,原来是:路由中path的值不能以小写m开头,否则

  • 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

  • vue项目打包后提交到git上为什么没有dist这个文件的解决方法

    vue项目中使用npm run build打包后会生成一个dist文件,使用git推送项目后,发现git上少了一个dist文件,为什么明明本地项目中有这个文件而推上去就没有了呢? 这里会先介绍.gitignore,不想看的 请直接跳过介绍 看解决办法 一..gitignore 介绍 这里向大家简述一下.gitignore这个文件 一.简绍 我们做的每个Git项目中都需要一个".gitignore"文件,这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中.比如我们项目中的npm包

  • 解决VUE项目在IIS部署出现：Uncaught SyntaxError: Unexpected token ＜ 报错

    解决VUE项目在IIS部署出现：Uncaught SyntaxError: Unexpected token ＜ 报错

    一.第一个解决方法是把mode改成history这个问题就会消失 二.第二个解决方法是publicPath设置成’/’,不能是’./’ const publicPath=''; module.exports = { // publicPath: process.env.NODE_ENV === 'production' ? '/lucky-draw' : '/' publicPath: `/${publicPath}` }; 三.报错404 Not Found,请重写url 在IIS正常部署完v

  • Vue项目报错:Uncaught SyntaxError: Unexpected token '＜'的解决方法

    Vue项目报错:Uncaught SyntaxError: Unexpected token '＜'的解决方法

    目录 问题: 一.public下的index.html没有引入其他外部js文件. 二. public下的index.html引入其他外部js文件. 原因一.引用文件的位置不正确 原因二:配置信息不正确 原因三:script的引入类型不对 总结 问题: 最近做vue项目时,当我访问二级路由的时候,就会报Uncaught SyntaxError: Unexpected token ‘<‘错误,而我访问一级路由不会报错.翻了网上很多资料,都无法解决. 一.public下的index.html没有引入其

  • Vue项目报错：Uncaught SyntaxError: Unexpected token <

    遇到问题: 今天做一个 VUE 的项目,在引入第三方依赖的 JS 文件时,遇到了一个问题: 控制台的提示:Uncaught SyntaxError: Unexpected token < 按照提示进入文件,再看如下图: 仔细看了看 index.html 文件,发现原本我的 JS 文件是放在 /src/utils 文件夹下的,但引入 /src 和 /static 的文件是有区别的. 解决方案: 解决办法是将第三方依赖的 JS 文件放到 /static/utils 目录下,引入路径也改成:<scr

  • vue项目打包后上传至GitHub并实现github-pages的预览

    vue项目打包后上传至GitHub,并实现github-pages的预览 1. 打包vue 项目 vue项目: 命令行输入打包命令npm run build,生成了dist文件夹: 打包完成. 打包常见问题1--项目资源无法加载 打开刚刚打包好的dist文件夹,浏览器打开index.html 发现该页面是空白的,打开控制台发现 这里看到index.html文件中没有加载任何css.js文件. 解决方法--修改config文件 打开项目根目录config下的index.js文件,进行如下修改: 即

  • 详解vue项目打包后通过百度的BAE发布到网上的流程

    经过两天的研究终于将VUE打包后的项目通过BAE发布到了网上.虽然接口方面还有一下问题但是自己还是很高兴的. 首先说一下这个项目需要用到的技术,vue+express+git+百度的应用引擎BAE. 继续编辑终于将自己写的JSON文件模拟的数据也传上去了. 具体的步骤: 1,首先讲写好的vue项目打包(具体的打包过程我就不在说了,直接npm run build,就会在VUE项目文件中重新创建一个dist文件,这个就是打包好的项目) 2,在百度的应用引擎BAE部署一个项目,一天才2毛钱很便宜.自己

  • vue项目打包后请求地址错误/打包后跨域操作

    vue项目 npm run dev时跨域请求正常,但是打包后请求地址就错误(请求地址不存在),请求不到数据. 在vue项目中常用的是proxyTable代理跨域,这个用起来比较方便,但是当项目打包后就遇到这个问题了. 解决办法如下: 打开config文件夹下的index.js文件,添加以下代码 pathRewrite: { '^api':'https://*****.com' //填写需要跨域的地址 } 2.配置开发环境地址,就是config文件夹下的dev.env.js文件,添加以下代码: '

  • Vue项目打包后可修改基础接口地址配置的具体操作

    Vue项目打包后可修改基础接口地址配置的具体操作

    目录 一.目的 二.具体操作实现 总结 一.目的 最近在学习或工作中遇到,把 Vue 前端项目打包后,要求可以再次修改请求后端接口的基础地址.平常开发中在 Vue 项目中使用 axios 时把请求后端接口的基础地址写在了 baseURL 里. 这样子打包后如果要改图里红框处的地址,要么去打包编译后的文件堆里一个个搜索(如果项目不小的话,这文件堆可不少...),找到后直接改,要么在源码里改完后重新再打包部署,这两种做法都显得有些麻烦,且维护性也不好. 所以本文用一种较好的方案来解决以上问题,通过创

  • vue项目打包后部署到服务器的详细步骤

    vue项目打包后部署到服务器的详细步骤

    耽误了几天, 终于开始写第二篇博客了, 这篇会讲怎么将vue项目打包部署到服务器, 其实和上一篇的uni-app步骤一样的, 就是最后多了一步修改nginx配置, 好 , 上操作 一 ,打包项目 vscode下载链接: 链接: https://pan.baidu.com/s/1PD-Sts-e2V17wSs5FvrLmg 提取码: 2jbf 1 , vscode打开你的vue项目 -- > 点终端- > 新终端- >输入npm run build 按回车 , 显示正在打包..稍等一会 2

随机推荐