今天项目碰到项目在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 Header
content-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.js
output输出文件名格式,目前问题已得到解决
资料三：
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的引入屏蔽掉一切正常，一旦放开就无法正常运行，显然就是这个插件的引入导致了这个页面的链接无法正常的显示。到此算是问题已经找到了。记录下以免下次遇到继续的蒙圈。
由此也发现错误提示信息的重要性，有的时候报错信息一经明确得给出了出问题的原因。准确分析分析、才能快速的解决问题。
这里仅是本人的个人见解，如果有不对的地方期待大佬的赐教
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
