guohaoyun

开发掉坑(二)前端静态资源 Uncaught SyntaxError: Unexpected token <

某天,有同学反馈后台管理系统出现静态资源无法加载的问题。

复现如下:

  1. 进入首页。

  2. 点击侧边栏某个子功能,静态资源可正常访问到。

  3. 等待10分钟左右,点击侧边栏其他子功能,无法访问到静态资源。

  4. 查看控制台,发现输出 Uncaught SyntaxError: Unexpected token <

一开始检查了一下是不是服务器上面没有这个静态资源文件,随机找了一台服(注意,从这里开始掉坑里了),发现文件是存在;

接着怀疑是静态文件因为某种原因,会不时变动文件名,但是测试了一下,半小时内文件未曾发生变动;

然后又是在so上各种查 Uncaught SyntaxError: Unexpected token <有可能是什么情况,但都和我们的情况不符

最后想起,后台系统域名是有解析到两台服的,然后一查,发现果然两台服的静态资源文件名不一致。

结论:
原来是因为前端是在各自服务器上面编译的,而编译打包脚本不是根据文件hash值算出文件名(后续补充vue的各个编译算法是怎么给打包后的文件起名字的),所以导致出现差异。
第一次进入后台,DNS解析到了A服务器,过了一段时间,再点其他功能,DNS可能就解析到B服务器了,但是请求的文件名依旧是A/a.js,而B服务器上面是没有a.js这个文件的。

解决方案:
用一台编译机进行编译,再同步到业务服上面去。

posted on 2021-04-27 23:55  邮差101  阅读(666)  评论(0编辑  收藏  举报

导航