记一次Uncaught SyntaxError: Unexpected token ＜错误

前两天在项目中添加实时监控的功能的时候，用了Jessibuca这个开源js播放器，参照他的demo，在我大屏监控项目中添加了视频监控代码。

Jessibuca不是一个npm包，通过静态加载方式加载。所以在vue的index.html主页面添加js加载代码。vue添加静态资源参照demo项目添加到与index.html所在目录一起的public目录。然后在index.html中添加一行script加载。

    <script type="text/javascript" src="./js/jessibuca/index.js"></script>

添加完之后，调试代码。启动后发现报一个莫名其妙的错误Uncaught SyntaxError: Unexpected token ＜，指向index.js。

点击后指向index.html第一行。

​​​​​​​ 

忽略加载代码那段使用的localhost:8081。这个截图是在尝试了很多次之后依然无法解决时，试着通过和百度api一样跨域加载时修改的。错误还是一模一样。 

 既然出现这样的错误，我就搜索一下大家的解决方案呗。搜索发现确实有很多朋友碰到过这样的问题。不过大多数都是vue（或其他的前端框架）静态加载js不成功造成的。我通过页面调试，发现js是加载成功的。

是不是vue加载方式有所不同，导致页面加载了js代码，但是在vue里使用会有问题？抱着这样的想法，参考大家的方案，尝试了很多不同的加载方案，包括前面提到的加载另外工程的js。还是没法解决。

这个问题困扰了我有两天，一直一筹莫展。突然，我突发奇想，vue打包后不就是一个纯h5的包吗？直接检查打包后加载的页面是否可以找到原因呢？

打完包后，通过nginx加载，这时候发现报错的地方变了，提示我找不到根路径下的index.js。我没有需要加载根路径的index.js啊！难道哪里有写错？找了一圈代码之后没有发现。后来查找Jesssibuca的api，发现其中有个属性decorder，默认是index.js，url解析后就是根路径下的index.js。设置该属性，指向正确的路径之后，问题解决。

有类似同样的问题的同学可以参考我的方式，尤其是类似js库，在加载后创建的对象中又重新需要加载js的情况。打包部署一下，可能能看到更加准确的错误信息。

这里也吐槽一下这个播放库，demo中因为js部署和index.html同级，所以没有出现我这样的问题。但是没有一个像样的说明，提醒相关的api设置。另外，既然在index.html里已经加载成功说明js路径已经知道，为什么还需要通过decorder属性再次加载？不过既然人家都开源了，还想怎样？给你用就不错了，还要什么自行车？

补充一下，今天访问网页的时候，又没有加载出来，我配了次路径，url又跑到根目录下去了。搞半天原来是因为我访问的时候url最后没有加/符号的缘故，比如，访问的url应该是

波益大数据信息化平台http://101.132.44.93/screen/

变成了​​​​​​​波益大数据信息化平台http://101.132.44.93/screennginx配置添加一下标红内容可以实现请求自动添加斜杠

location ^~ /screen {
        root   html;
        index  index.html index.htm;
        try_files $uri $uri/ /screen/index.html;
        }