今天项目碰到项目在chrome49版本下报Uncaught SyntaxError: unexpected token *错误，但是在高版本下又一切正常。真是一脸的蒙圈，赶紧各种的百度。
资料一：
控制台的提示：Uncaught SyntaxError: Unexpected token <
按照提示进入文件，再看如下图：
仔细看了看 index.html 文件,发现原本我的 JS 文件是放在 /src/utils 文件夹下的，但引入 /src 和 /static 的文件是有区别的。
解决方案：
解决办法是将第三方依赖的 JS 文件放到 /static/utils 目录下，引入路径也改成：<script src="./static/utils/sockjs.js"></script>，这样就不报错了！
总结：
1、assets文件夹与static文件夹的区别
区别一：assets文件是src下的，所以最后运行时需要进行打包，而static文件不需要打包就直接放在最终的文件中了
区别二：assets中的文件在vue中的template/style下用../这种相对路径的形式进行引用，在script下必须用@import的方式引入而static下的文件在.vue中的任何地方都只要使用../这种相对路径的方式引入，
2、（1）assets用来放置样式、静态图片，只要src下面的组件中用到的资源就放在assets中。
（2）static用来放没有npm包的第三方插件，字体文件。
（3）assets与components同级 components下的.vue引用静态文件时，相对路径为 ../assets/wapFront
3、vue如何引入其它静态文件：
（1）src目录下的资源只能import或require。
（2）想静态引入的话，建立一个与src同级的目录例如static，然后把静态资源放入该文件夹下，html的引入路径如下：./static/...（注：试过一定要放在static文件夹下，否则报错）
资料二：
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token <" 报错
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自然无法识别<html>这种标签符号,导致console抛出Uncaught SyntaxError:Unexpected token <,我尝试修改build/webpack.prod.conf.jsoutput输出文件名格式,目前问题已得到解决
资料三：
Vue打包后放到服务器出现Loading chunk {n} failed 错误
解决办法：
我们需要给路由加一个错误的回调方法，在监听到路由报错之后进行页面刷新操作，这时就可以获取到当前最新的代码来解决报错问题。
/* 路由异常错误处理，尝试解析一个异步组件时发生错误，重新渲染目标页面 */
router.onError((error) => {
const pattern = /Loading chunk (\d)+ failed/g;
const isChunkLoadFailed = error.message.match(pattern);
const targetPath = router.history.pending.fullPath;
if (isChunkLoadFailed) {
router.replace(targetPath);
}
});
资料四：
应该是打包之后路由路径处理问题，建议修改build和config目录下的配置文件配置属性：publicPath：‘/’，这个最好是将研发、测试和生产环境的都修改掉，重新打包，查看各个环境的路由跳转是否正常即可。
比如我在我的项目里面是这样：
1.build目录
2.config各个环境下的：
----------------------------------
查询了这么多资料之后，开始解决问题：
Uncaught SyntaxError: Unexpected token *，就是说这是无法解释的语法错误。看了network里所有的资源都正常引入，就大胆的假设是哪里的代码有问题，导致死循环，于是开始屏蔽掉各种不相干的代码。最后的最后定位到了swiper的引入。也许是因为swiper是用于移动端的，所以在pc端的低版本浏览下存在兼容问题
把swiper的引入屏蔽掉一切正常，一旦放开就无法正常运行，显然就是这个插件的引入导致了这个页面的链接无法正常的显示。到此算是问题已经找到了。记录下以免下次遇到继续的蒙圈。
由此也发现错误提示信息的重要性，有的时候报错信息一经明确得给出了出问题的原因。准确分析分析、才能快速的解决问题。
这里仅是本人的个人见解，如果有不对的地方期待大佬的赐教